Высота 100% на flexbox

У меня возникают проблемы с столбцом 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% не работает?

Ответ 1

TL; DR: Установите .flex в display:flex и избавьтесь от height:100% на .flex-child. Здесь вы можете увидеть измененную CodePen.

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

Я узнал из этого похожего вопроса, что, согласно спецификации flexbox, значение align-self:stretch (значение по умолчанию для элемента flex) изменяется только используемое значение свойства поперечного размера элемента (в данном случае height). Проценты, однако, рассчитываются из указанного значения родительского свойства кросс-размера, а не для значения. Если вы когда-либо вскрываете своего инспектора и смотрите height:100% в разделе "Стили", но height:1200px в разделе "Вычислить", то это показывает указанные и используемые значения соответственно.

Кажется, что 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.

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