Как сделать гибкий ребенок переполнять родителя, когда он растет?

Question

У меня есть Flexbox с одного гибким ребенком:

<div class="flex-parent"> 
    <div class="flex-child"> 
    lots of content... 
    </div> 
</div> 

.flex-parent имеет фиксированный размер:

.flex-parent { 
    height: 250px; 
} 

Флекс ребенок имеет так много информации, что он должен переполнением размера своего родителя. Вместо этого его высота остается «закрытой» на высоте родителя (250 пикселей).

Как исправить это и сделать .flex-child расти с его содержанием? Я могу легко исправить это, переключившись на display: block, но мой реальный макет намного сложнее, что делает его непрактичным.

Проблема: http://codepen.io/anon/pen/OWjYwe
Как это должно работать: http://codepen.io/anon/pen/apyraV

Answer 1

Использование flex на коробке с одним ребенком может быть бесполезным, если для вертикальной/горизонтальной alignement.

Чтобы позволить сгибать-ребенок расти наведет выставиться высоту, а затем сбросить flex-direction к column:

см ответа @Michael B для получения подробной информации о алгоритме проклейки гибкого элемента

.flex-parent { 
 
    display: flex; 
 
    height: 200px; 
 
    flex-flow: column; 
 
    border: solid; 
 
} 
 
.flex-child { 
 
    background: cornflowerblue; 
 
}

<div class="flex-parent"> 
 
    <div class="flex-child"> 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content 
 
    </div> 
 
</div> 
 
<p>What about me ?</p>

Вы также можете использовать overflow, но различное поведение:

.flex-parent { 
 
    display: flex; 
 
    height: 200px; 
 
    overflow:auto; 
 
    border:solid; 
 
} 
 

 
.flex-child { 
 
    background: cornflowerblue; 
 
}

<div class="flex-parent"> 
 
    <div class="flex-child"> 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content 
 
    </div> 
 
</div> 
 
<p>What about me ?</p>

Наконец, используйте min-height вместо height

.flex-parent { 
 
    display: flex; 
 
    min-height: 200px; 
 
    border:solid; 
 
} 
 

 
.flex-child { 
 
    background: cornflowerblue; 
 
}

<div class="flex-parent"> 
 
    <div class="flex-child"> 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content 
 
    </div> 
 
</div> 
 
<p>What about me ?</p>

Answer 2

Переключите контейнер flex-direction: column.

---

Это решение использует flex item minimum sizing algorithm для достижения Вашего макета.

Элемент flex, по умолчанию, не может быть меньше размера его содержимого.

В начале строки начальная настройка на элементах сгиба составляет min-width: auto. Но это не поможет вам, потому что вы ищете вертикальное, а не горизонтальное расширение.

В начальном положении в колонке начальная установка min-height: auto. Это поможет вам. Это гарантирует, что элемент гибкости никогда не будет меньше высоты содержимого.

Подробнее здесь: Why doesn't flex item shrink past content size?