Как работать вложенные flexboxes

Ответ 1

Если вам не нужен дополнительный div, удалите его. Иногда существует разница между высотой элемента и его длиной вдоль главной оси (ориентация столбца), что вызывает некоторую путаницу здесь. В принципе, похоже, что он выше, чем полагает браузер, поэтому height: 100% работает не так, как вы ожидаете (я не уверен, какое поведение в этом случае правильно).

По какой-либо причине продвижение элемента в контейнер flex работает.

http://jsfiddle.net/MUrPj/14/

<div class="box fullSize">
    <div class="boxHeader">HEADER</div>
    <div class="boxContent box">
        <div class="boxHeader moregreen">INNER HEADER</div>
        <div class="boxContent red">CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT</div>
        <div class="boxFooter moreblue">INNER FOOTER</div>
    </div>
    <div class="boxFooter">FOOTER</div>
</div>

Ответ 2

Этот вопрос был связан для конкретной проблемы: как сделать так, чтобы вложенные элементы во флекс-боксе заполняли всю высоту? Краткий ответ:

Используйте display:flex на ребенке и избегайте height:100%. Вот упрощенный пример кода.

CourtDemone объяснил это хорошо (подробнее здесь):

В соответствии со спецификацией flexbox значение align-self:stretch (по умолчанию для элемента flex'd) изменяет только используемое значение свойства cross-size элемента (в данном случае, height). Однако проценты рассчитываются на основе указанного значения родительского свойства перекрестного размера, а не его используемого значения.

Ответ 3

Я нашел решение, не удаляя лишний div.

Вам нужно сделать boxContent относительным положением и содержащим его блоком абсолютным.

Прикрепив дополнительный класс CSS к внутреннему div:

<div class="boxContent">
    <div class="box fullSize innerBox">

и следующий css:

.boxContent {
  ...
    position: relative;
}
.innerBox{
    position: absolute;
    top: 0px;
    bottom: 0px;
}

здесь обновленный jsfiddle: http://jsfiddle.net/MUrPj/223/

Этот вопрос довольно старый, но это может быть полезно для будущих посетителей

Ответ 4

Этот JsFiddle является минимально необходимым CSS-атрибутом для работы вложенных флексбоксов. Я показал это для столбца; если вы делаете это в строке, удалите два "flex-direction: column" s. [В этом тривиальном примере их удаление ничего не изменит, потому что в каждом flexbox есть только один дочерний элемент. Но как только вы добавите второго ребенка, вы будете работать либо в строке, либо в столбце.]

HTML:

<div id="e1">
  <div id="e2">
    <div id="e3">    
    </div>
  </div>
</div>

CSS:

html, body, #e1 {
  height: 100%; width: 100%;
}
#e1 {
  background-color: #ff0000;
  display: flex;
  flex-direction: column;
}
#e2 {
  background-color: #ffff00;
  /* Try removing either of the next 2 lines - a box collapses. */
  flex: 1;
  display: flex;
  flex-direction: column;
}
#e3 {
  background-color: #00ff00;
  flex: 1;
}

По моему опыту, Safari 13 (как для MacOS, так и для iOS) более привередлив (вложенные гибкие элементы), чем Chrome 77, Firefox 69 или даже Edge 18.
Хотя в этом простом примере все 3 реагируют одинаково, у меня сложилась более сложная ситуация, которая работала во всех, кроме Safari. Тем не менее, код, показанный здесь, особенно две строки в #e2 после "Попробуйте удалить любую из следующих двух строк", - это суть того, что заставило мою более сложную ситуацию работать в Safari.

Кроме того, в случае возникновения трудностей первым шагом является удаление всех атрибутов высоты "процентов" внутри вложенных элементов. Здесь это означает, что #e1 разрешено иметь height: 100% - это в контексте его родителя, который не является гибким контейнером. Но #e2 и #e3 не должны объявлять % высоты.

Вложенные элементы с высотой , которые не относятся к их родительскому элементу (пиксели, ems, vh), хороши, AFAIK. Обратите внимание, что vh работает, потому что он относится к размеру окна, который не зависит от высоты вложенных flex-контейнеров (# e1, # e2). Так что логика вычислений легко понять браузером.