Question

I have a page with the following structure:

div.wrapper > div.content > div.item + div.item

The wrapper has a width of 320px, whereas the two div.item come out to around 600px. I need those two to be displayed inline (right now they are display: inline-block;, and have the wrapper’s contents scroll horizontally. When I set the div.content width to auto, 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 div.content to take on the width of its contents to allow for horizontal scrolling?

Note: The wrapper is set to a fixed width and height and has overflow-y: hidden and overflow-x: scroll set, because I do not want vertical scrolling– only horizontal.

JSFiddle with an example:
http://jsfiddle.net/kh5k7/

As you can see, the red divs will vertically stack. Changing the .content 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 .content div before hand.

Answer 1

Use white-space:nowrap; on .content

.content{
   width: auto;
   white-space:nowrap; 
}

http://jsfiddle.net/kh5k7/1/