Make div always have the width of its contents
<p>I have a container <code>div</code> with a few elements inside, like so:</p>

<pre><code>&lt;div class="container"&gt;
  &lt;p&gt;one&lt;/p&gt;
  &lt;p&gt;two&lt;/p&gt;
  &lt;p&gt;three&lt;/p&gt;
  &lt;p&gt;four&lt;/p&gt;
  &lt;p&gt;five&lt;/p&gt;
  &lt;p&gt;six&lt;/p&gt;
  &lt;p&gt;seven&lt;/p&gt;
  &lt;p&gt;eight&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p>It looks like this:</p>

<p><a href="https://i.stack.imgur.com/3nNM5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3nNM5.png" alt="SS"></a></p>

<p>You can the that the <code>.container</code> div (in blue) extends to fill the whole width of the window. I would like it to always 'hug' the <code>p</code>'s inside, to always have the minimum <code>width</code> necessary.</p>

<p>I have accomplished by setting it to <code>display: inline-block</code>. Now it looks like
<a href="https://i.stack.imgur.com/blmpx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/blmpx.png" alt="SS2"></a></p>

<p>Here comes the problem. When I re-size the window so that one of the elements gets 'pushed' down to a second row, the <code>.container</code> div does not shrink to fit the new size of the elements. Instead, it stretches to the edge of the window.</p>

<p><a href="https://i.stack.imgur.com/9SzMc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9SzMc.png" alt="SS3"></a></p>

<p>How would I make the div fit its contents, even when re-sizing, so that it would look like so?</p>

<p><a href="https://i.stack.imgur.com/B7OTJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/B7OTJ.png" alt="SS4"></a></p>

<p>I have searched and searched, but could not find an answer to this problem.</p>

<p>JSFiddle <strong><a href="https://jsfiddle.net/z6hLt7wh/2/" rel="nofollow noreferrer">Here</a></strong></p>