На этот вопрос уже есть ответ здесь:

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

HTML

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;
}

Вот'S CodePen.

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