Вложенные ограничения ширины div на полосе прокрутки родительского прокручиваемого div

Question

В принципе, у меня есть главный контейнер контейнера с вложенным контентом. Этот div имеет динамическую ширину и будет изменять размер страницы.

Теперь, в этом div, у меня есть список предметов. Все элементы имеют фиксированную ширину, и я хочу иметь возможность расширять контейнер div (overflow: auto). Если я установлю свой список как дисплей: block ;, он станет 100% шириной контейнера. Однако, если есть много элементов списка, которые заставляют горизонтальную полосу прокрутки, список блоков останавливается на панели прокрутки контейнера, и элементы списка продолжают передавать его.

Вот пример: http://jsfiddle.net/9tjZz/4/

Как я могу получить список блоков, чтобы простирается прошел скроллбар списка контейнера элементы делают?

Answer 1

Вы можете использовать clearfix, чтобы исправить это ... просто добавьте класс clearfix в свой контейнер и добавьте соответствующий CSS. Вот рабочий пример:

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

Это CSS вам нужно:

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

А затем добавить class="clearfix", где это необходимо. В вашем случае это контейнер.