Nested div width stops at scrollbar of parent scrollable div

Question

Basically, I have a main container div with nested content. This div is has a dynamic width and will resize with the page.

Now, in this div, I have a list of items. All the items are fixed widths and I want to be able to extend the container div (overflow: auto). If I set my list as a display: block;, it will become 100% width of the container. However, if there are many list items that force a horizontal scrollbar, the block list stops at the container scrollbar and the list items continue passed it.

Here is an example: http://jsfiddle.net/9tjZz/4/

How can I get the block list to extend passed the scrollbar of the container list the items do?

Answer 1

You can use a clearfix to fix this... just add the clearfix class to your container and add the appropriate CSS. Here is the working example:

http://jsfiddle.net/9tjZz/5/

This is the CSS you need:

.clearfix:after {
        content: ".";
        display: block;
        clear: both;
        visibility: hidden;
        line-height: 0;
        height: 0;
    }

    .clearfix {
        display: inline-block;
    }

    html[xmlns] .clearfix {
        display: block;
    }

    * html .clearfix {
        height: 1%;
    }

And then add class="clearfix" where needed. In your case, it is the container.