Próbuję wypełnić pionową przestrzeń elementu elastycznego wewnątrz modułu Flexbox.

.container {
  height: 200px;
  width: 500px;
  display: flex;
  flex-direction: row;
}
.flex-1 {
  width: 100px;
  background-color: blue;
}
.flex-2 {
  position: relative;
  flex: 1;
  background-color: red;
}
.flex-2-child {
  height: 100%;
  width: 100%;
  background-color: green;
}

<div class="container">
  <div class="flex-1"></div>
  <div class="flex-2">
    <div class="flex-2-child"></div>
  </div>
</div>

I oto jestJSFiddle

flex-2-child nie wypełnia wymaganej wysokości z wyjątkiem dwóch przypadków, w których:

flex-2 ma wysokość 100% (co jest dziwne, ponieważ element flex ma domyślnie 100% + jest wadliwy w Chrome)flex-2-child ma pozycję absolutną, która jest również niewygodna

To nie działa obecnie w Chrome lub Firefox.