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

Question

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

Теперь в этом разделе у меня есть список предметов. Все элементы имеют фиксированную ширину, и я хочу иметь возможность расширить контейнер div (переполнение: авто). Если я установлю свой список как display: 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", где это необходимо. В вашем случае это контейнер.