Menu
For various reasons, I have a nested ol inside of a div, 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%; } 
705
It seems like this should be one of the easiest things to understand in CSS. If you want a block-level element to fill any remaining space inside of its parent, then it's simple — just add width: 100% in your CSS declaration for that element, and your problem is solved.
No, element width does not include padding, margin, or border.
Yes, as per the CSS 2.1 Specification, all non-negative values are valid for width, that includes percentage values above 100%.
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.
103
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
