CSS width 100% including overflow
27,757
Just use display: inline-block
. You can read more in the W3C specs.
Replace width:100%
with display:inline-block
in those two element styles.
Author by
Jeff Jenkins
Updated on August 24, 2022Comments
-
Jeff Jenkins almost 2 years
For various reasons, I have a nested
ol
inside of adiv
, where the contents of the list exceeds the size of the container.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 jsFiddle showing a simplified example of what I'm trying to explain.
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.
Thanks.
div { border: 1px solid black; margin: 33% auto; overflow: scroll; white-space: nowrap; width: 100px; } div > ol { background: red; width: 100%; }