如何将div扩展为其内容宽度当它大于其父项？

Question

我试图建立一个轮播视图。为此，我有一个表示视口的父div，一个内容div，持有要在视图中显示的项目以及未知数量的div，表示视图中显示的项目。

<div id="viewport"> 
    <div id="content"> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     ... 
    </div> 
</div> 

父项和项目大小事先已知，但我希望内容大小与项目一起增长。使用以下CSS，这些项目按内联方式显示，但内容的宽度只会扩展到与其父宽度相匹配。

#viewport { 
    position: absolute; 
    width: 400px; 
    height: 200px; 
    overflow: hidden; 
} 

#content { 
    white-space: nowrap; 
} 

.item { 
    display: inline-block; 
    width: 200px; 
    height: 200px; 
} 

如何才能使内容div扩展到与其子级大小相匹配？这里是我所说的JSFiddle：http://jsfiddle.net/j4LnB/（红色边框显示内容的大小）。

Answer 1

您可以在＃内容DIV

Answer 2

视口的div使用min-width，而不是width应该做的伎俩使用display: inline-block;。这允许内容div扩展到完整的子节点宽度。

#viewport { 
    position: absolute; 
    min-width: 400px; 
    height: 200px; 

http://jsfiddle.net/j4LnB/1/