title: Horizontal Scrolling, fit to Content Width
body: <p>I have a page with the following structure:</p>
  
  <p><code>div.wrapper</code> > <code>div.content</code> > <code>div.item</code> + <code>div.item</code></p>
  
  <p>The wrapper has a width of 320px, whereas the two <code>div.item</code> come out to around 600px. I need those two to be displayed inline (right now they are <code>display: inline-block;</code>, and have the wrapper's contents scroll horizontally. When I set the <code>div.content</code> width to <code>auto</code>, it takes the width of the wrapper (320px). Setting the width to 200% obviously gets the horizontal scrolling to work, but how do I get <code>div.content</code> to take on the width of its contents to allow for horizontal scrolling?</p>
  
  <p>Note: The wrapper is set to a fixed width and height and has <code>overflow-y: hidden</code> and <code>overflow-x: scroll</code> set, because I do <em>not</em> want vertical scrolling-- only horizontal.</p>
  
  <p>JSFiddle with an example:
  <a href="http://jsfiddle.net/kh5k7/">http://jsfiddle.net/kh5k7/</a></p>
  
  <p>As you can see, the red divs will vertically stack. Changing the <code>.content</code> width to 200% (or some value) will cause horizontal scrolling to occur properly. I want this done automatically though, because I have no clue how many elements are going to be in the <code>.content</code> div before hand.</p>