Use Flexbox to shrinkwrap and center an element containing inline-block children
<p>Normally, an element containing wrapping <code>display:inline-block</code> elements takes up 100% of the available width, giving you something like this:</p>

<pre><code>-----------------BODY------------------
|                                     |
||-------------CONTAINER-------------||
||-INLINEBLOCK---INLINEBLOCK--       ||
|||____________||____________|       ||
||-INLINEBLOCK--                     ||
|||____________|                     ||
||___________________________________||
|_____________________________________|
</code></pre>

<p>Say, instead you wanted to shrinkwrap and center the container:</p>

<pre><code>-----------------BODY------------------
|                                     |
|   |----------CONTAINER---------|    |
|   |-INLINEBLOCK---INLINEBLOCK--|    |
|   ||____________||____________||    |
|   |-INLINEBLOCK--              |    |
|   ||____________|              |    |
|   |____________________________|    |
|_____________________________________|
</code></pre>

<p>As far as I can tell, this was impossible with traditional CSS and <a href="https://stackoverflow.com/questions/31781536/centering-inline-block-elements-when-flexbox-and-classic-techniques-dont-work">required JavaScript hacks</a>.</p>

<p>Can this problem be solved with flexbox? If so, how?</p>

<p>[Diagrams shamelessly stolen from <a href="https://stackoverflow.com/questions/31781536/centering-inline-block-elements-when-flexbox-and-classic-techniques-dont-work">this question</a>.]</p>