Question

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%;
}​

Answer 1

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.