嵌套的 div 宽度在父可滚动 div 的滚动条处停止答案

【问题标题】：Nested div width stops at scrollbar of parent scrollable div嵌套的 div 宽度在父可滚动 div 的滚动条处停止
【发布时间】：2012-01-19 15:22:05
【问题描述】：

基本上，我有一个包含嵌套内容的主容器 div。此 div 具有动态宽度，并且会随页面调整大小。

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

这里是一个例子：http://jsfiddle.net/9tjZz/4/

如何让阻止列表扩展通过容器列表的滚动条？

【问题讨论】：

标签： css html scrollbars

【解决方案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"。在您的情况下，它是容器。

【讨论】：