嵌套的div宽度停止在父滚动div的滚动条上

Question

基本上，我有一个带有嵌套内容的主容器div。这个div有一个动态宽度，并将调整页面大小。

现在，在这个div中，我有一个项目列表。所有的项目都是固定的宽度，我希望能够扩展容器div（overflow：auto）。如果我将我的列表设置为display：block，它将成为容器的100％宽度。但是，如果有许多强制水平滚动条的列表项，则阻止列表停止在容器滚动条处，并且列表项继续传递给它。

下面是一个例子：http://jsfiddle.net/9tjZz/4/

我怎样才能阻止列表，延长通过容器列表中的项目做的滚动条？

Answer 1

您可以使用clearfix来修复此问题...只需将clearfix类添加到您的容器并添加相应的CSS即可。这里是工作示例：

http://jsfiddle.net/9tjZz/5/

这是你需要的CSS：

.clearfix:after { 
     content: "."; 
     display: block; 
     clear: both; 
     visibility: hidden; 
     line-height: 0; 
     height: 0; 
    } 

    .clearfix { 
     display: inline-block; 
    } 

    html[xmlns] .clearfix { 
     display: block; 
    } 

    * html .clearfix { 
     height: 1%; 
    } 

然后添加class="clearfix"需要的地方。就你而言，它是容器。