To pytanie ma już tutaj odpowiedź:

Mam problemy z kolumną flexbox, w której dzieci elementu flex'd nie odpowiadająheight w procentach. Sprawdziłem to tylko w Chrome i z tego, co rozumiem, to tylko problem z Chrome. Oto mój przykład:

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

Oto CodePen.

Chcę tego tak czerwony.flex-child wypełnia błękit.flex. Dlaczego nieheight:100% praca?