Горизонтальная прокрутка DIV без фиксированной высоты со всеми содержала DIVS высоту самого высокого ребенка

Question

JSFiddle: Example

Я искал способ, чтобы иметь контейнер DIV с высотой, равной его высоким ребенком.

Каждый ребенок должен быть рассчитан на высоту контейнера.

Мне также нужен контейнер для прокрутки по горизонтали, если дети превысят его ширину.

До сих пор я пробовал использовать встроенный блок и поплавок: слева, но не получил результаты, которые я хочу. Высота установки: 100% на детей также не имеет желаемого эффекта. Использование overflow: auto в контейнере по-прежнему завертывает последний элемент на следующую строку.

Я довольно уверен, что могу выполнить это с помощью JavaScript, захватив высоту самого высокого ребенка и соответствующим образом изменив размер и установив фиксированную высоту на контейнере. Я бы предпочел не использовать JavaScript, хотя я думаю, что это возможно только с помощью CSS-обмана.

HTML

<div> 
    <div class='boxed'><ul><li>1</li></ul></div> 
    <div class='boxed'><ul><li>1</li><li>2</li></ul></div> 
</div> 

<div class='container'> 
    <div class='boxed'><ul><li>1</li></ul></div> 
    <div class='boxed'><ul><li>1</li><li>2</li></ul></div> 
    <div class='boxed'><ul><li>1</li><li>2</li></ul></div> 
    <div class='boxed'><ul><li>1</li><li>2</li></ul></div> 
    <div class='boxed'><ul><li>1</li><li>2</li></ul></div> 
    <div class='boxed'><ul><li>1</li><li>2</li></ul></div> 
    <div class='boxed'><ul><li>1</li><li>2</li><li>3</li></ul></div> 
    <div class='boxed'><ul><li>1</li><li>2</li></ul></div> 
    <div class='boxed'><ul><li>1</li><li>2</li></ul></div> 
    <div class='boxed'><ul><li>1</li><li>2</li></ul></div> 
    <div class='boxed'><ul><li>1</li><li>2</li></ul></div> 
    <div class='boxed'><ul><li>1</li><li>2</li></ul></div> 
</div> 

CSS

.boxed { display: inline-block; border: 1px solid black; } 

.container { overflow-x: auto; } 

Answer 1

Для первого вопроса, то вы могли бы сделать элементы display:table-cell в отличие от inline-block. Это заставит их занять высоту самого высокого родственного элемента. Я также предложил бы добавить vertical-align:bottom к элементам, чтобы выровнять их в нижней части родительского элемента. Если это не так, как вы делали, есть middle и top.

UPDATED EXAMPLE HERE

.boxed { 
    border: 1px solid black; 
    display:table-cell; 
    vertical-align:bottom; 
} 

Для второго вопроса, просто добавьте white-space:nowrap к родительскому элементу, чтобы предотвратить дочерние элементы из упаковки. Горизонтальная полоса прокрутки будет создана, когда элементы-дети превышают ширину родительских элементов.