растягивающий гибкий ребенок, чтобы заполнить высоту контейнера без явного родительского роста

в ситуациях, когда нам нужно растянуть гибкий ребенок, чтобы заполнить высоту контейнера, гарантируя высоту родителя, зависит от содержимого другого ребенка, - 100% - на дочернем поведенном поведении. Flexbox.

Почему использование «высота: 100%» может сломать Flexbox ]

при использовании «высота: 100%» в Flexbox:

• родитель, растянутый элемент, требует декларированной высоты, который подходит к Flexbox. Элемент, «Высота: 100%» проигнорирует их присутствие и приведет к конфликтам. element.
объяснение

в Flexbox с направлением строки (по умолчанию) свойство "Align-Items" контролирует вертикальное поведение. Его настройка по умолчанию - «растяжение», вызывая сгибание изгиб, чтобы автоматически растягиваться, чтобы заполнить доступную высоту, при условии, что родитель не имеет явного набора высоты.

Code example

] рассмотрим следующий код snippet:

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