CSS 宽度 100% 包括溢出

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

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

我创建了一个jsFiddle http://jsfiddle.net/zNv5u/1/显示我试图解释的内容的简化示例。

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

Thanks.

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

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

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

Replace width:100% with display:inline-block在这两个元素样式中。