CSS 宽度 100%，包括溢出

Question

由于各种原因，我在 div 中嵌套了一个 ol，其中列表的内容超出了容器的大小。

因为容器有固定宽度，所以列表元素的背景不会超出容器的可视区域，但内容可以正常滚动。

我创建了一个 jsFiddle显示我要解释的内容的简化示例。

我希望包含元素的宽度与溢出内容的宽度相匹配。在 jsFiddle 中，这意味着红色背景不会在中途被切断。

谢谢。

div
{
    border: 1px solid black;
    margin: 33% auto;
    overflow: scroll;
    white-space: nowrap;
    width: 100px;
}

div > ol
{
   background: red;
   width: 100%;
}​

Answer 1

只需使用display: inline-block。您可以在 W3C 规范中阅读更多信息。

将这两种元素样式中的 width:100% 替换为 display:inline-block。