CSS宽度100%,包括溢出

Question

由于各种原因,我有一个嵌套的ol内部div,其中列表的内容超过了容器的大小.

由于容器具有固定宽度,因此列表元素的背景不会超过容器的可视区域,但内容会正确滚动.

我创建了一个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这两种元素样式.