CSS 宽度 100% 包括溢出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12719997/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS width 100% including overflow
提问by webdevkit
For various reasons, I have a nested olinside of a div, where the contents of the list exceeds the size of the container.
由于各种原因，我在 aol内部嵌套了一个div，其中列表的内容超过了容器的大小。
Because the container has a fixed width, the list element's background does not exceed the viewable area of the container, yet the contents scroll properly.
由于容器具有固定宽度，列表元素的背景不会超出容器的可视区域，但内容可以正常滚动。
I have created a jsFiddleshowing a simplified example of what I'm trying to explain.
我创建了一个jsFiddle，显示了我要解释的内容的简化示例。
I would like the width of the contained element to match that of the overflowed content. In the jsFiddle, that would mean the red background doesn't get cut off midway.
我希望所包含元素的宽度与溢出内容的宽度相匹配。在 jsFiddle 中，这意味着红色背景不会在中途被切断。
Thanks.
谢谢。
div
{
border: 1px solid black;
margin: 33% auto;
overflow: scroll;
white-space: nowrap;
width: 100px;
}
div > ol
{
background: red;
width: 100%;
}?
采纳答案by ShouravBR
Just use display: inline-block. You can read more in the W3C specs.
只需使用display: inline-block. 您可以在 W3C 规范中阅读更多内容。
Replace width:100%with display:inline-blockin those two element styles.
在这两种元素样式中替换width:100%为display:inline-block。
