How to expand a div to its content width WHEN it is larger than its parent?

I'm trying to build a carousel view. For that I have a parent div, representing the viewport, a content div, holding the items to be shown in the view, and an unknown number of divs, representing the items shown in the view. ``` <div id="viewport"> <div id="content"> <div class="item"></div> <div class="item"></div> <div class="item"></div> ... </div> </div> ``` The parent and the items size is known beforehand but I want the content size grow with the items. With the following CSS, the items are displayed inline as I want, but the content's width will expand only until it matches its parent width. ``` #viewport { position: absolute; width: 400px; height: 200px; overflow: hidden; } #content { white-space: nowrap; } .item { display: inline-block; width: 200px; height: 200px; } ``` How can I make the content div expand until it matches its children size? Here is a JSFiddle for what I'm saying: http://jsfiddle.net/j4LnB/ (the red border is showing the content's size).