CSS宽度100％，包括溢出

Question

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

因为容器的宽度是固定的，所以list元素的背景不会超过容器的可视区域，但内容会正确滚动。

我创建了一个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。