Высота 100% на столбце flexbox дочерний

Question

У меня проблемы со столбцом flexbox, так как дочерние элементы элемента flex'd не отвечают на height в процентах. Я проверял это только в Chrome, и, насколько я понимаю, это проблема только Chrome. Вот мой пример:

HTML

<div class='flexbox'>
  <div class='flex'>
    <div class='flex-child'></div>
  </div>
  <div class='static'></div>
</div>

CSS

.flexbox{
  position:absolute;
  background:black;
  width:100%;
  height:100%;

  display: flex;
  flex-direction:column;
}

.flex{
  background:blue;
  flex:1;
}

.flex-child{
  background:red;
  height:100%;
  width:100%;
  display:block;
}

.static{
  background:green;
  width:100%;
  height:5rem;
}

Вот CodePen.

Я так хочу красный .flex-child заполняет синий .flex, Почему не height:100% Работа?

Answer 1

TL;DR: Установить .flex в display:flexи избавиться от height:100% на .flex-child, Вы можете увидеть модифицированный CodePen здесь.

Почему это работает:

Из этого похожего вопроса я узнал, что, согласно спецификации Flexbox, align-self:stretch Значение (по умолчанию для элемента flex'd) изменяет только используемое значение свойства cross-size элемента (в этом случае height). Однако проценты рассчитываются исходя из указанного значения свойства cross-size родительского элемента, а не его используемого значения. Если вы когда-нибудь взломаете свой инспектор и увидите height:100% под "Стили", но height:1200px в "Computed", то это показывает вам указанные и используемые значения соответственно.

Похоже, что Chrome следует спецификации в этом отношении. Это означает, что настройка height:100% на .flex-child означает 100% от указанного height из .flex, Так как мы не указали height на .flexэто означает, что мы берем 100% по умолчанию height, который auto, Видите, почему механизм верстки запутывается?

настройка .flex в display:flex и удаление height:100% от .flex-child (чтобы он не пытался установить 100% auto) сделаю .flex-child заполнить все .flex

Когда это не сработает:

Это не сработает, если вы пытаетесь заполнить только некоторые из .flex, напр. пытаясь установить .flex-child в height:90%потому что сгибание ребенка означает, что оно заполнит все доступное пространство. Я думал, что вы могли бы взломать его с абсолютным позиционированием, но это тоже не работает. Вы можете взломать, добавив второго ребенка в .flex что мы позвоним .spacerи настройка .spacer в flex:1 а также .flex-child в flex:9 (не забудьте установить flex-direction:column на .flex тоже). Взломать, но только так я мог это исправить. Вот CodePen.

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