CSS宽度100％包括溢出

由于各种原因,我在一个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%;
}​

解决方法

只需使用display：inline-block.您可以阅读更多的W3C规范.

用这两个元素样式中的display：inline-block替换width：100％.