title: Div inside overflow="auto" to auto size its width to its contents
body: <p><strong>Here is my HTML:</strong></p>
  
  <pre><code>&lt;div class="scrollingBox"&gt;
      &lt;div class="container"&gt;
           &lt;div class="item"&gt;Item&lt;/div&gt;
           &lt;div class="item"&gt;Item&lt;/div&gt;
           &lt;div class="item"&gt;Item&lt;/div&gt;
           &lt;div class="item"&gt;Item&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div
  </code></pre>
  
  <p><strong>Here is my CSS:</strong></p>
  
  <pre><code>.scrollingBox {
      height:100px;
      width:300px;
      overflow:auto;
  }
  .item {
      float:left;
      height:60px;
      margin:5px;
      width:100px;
  }
  </code></pre>
  
  <p>The <code>.container</code> can contain any number of <code>.item</code>s.</p>
  
  <p>My problem at the moment is the <code>.container</code> will never go wider than the <code>.scrollingBox</code>, and the scrolling box ends up with a vertical scroll bar, and the <code>.item</code>s end up stacking vertically. I give the <code>.container</code> a fixed height, but the <code>.item</code>s stack vertically beyond this fixed height.</p>
  
  <p>I want the <code>.container</code> to have no fixed width, so it can take any number of items. I want the scroll bar to be horizontal, and I also want the <code>.item</code>s to stack horizontally.</p>
  
  <p><strong>My question:</strong></p>
  
  <p>What CSS do I apply to <code>.container</code> to make the <code>.item</code>s stack horizontally?</p>