Comment faire en sorte que les enfants Flexbox aient une hauteur égale à celle de leur parent ?

Question

J'essaie de remplir l'espace vertical d'un élément flex à l'intérieur d'une 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>

Et voici le JSFiddle

flex-2-child ne remplit pas la hauteur requise, sauf dans les deux cas où :

1. flex-2 a une hauteur de 100% (ce qui est bizarre car un élément flex a une hauteur de 100% par défaut + c'est buggé dans Chrome)
2. flex-2-child a une position absolue, ce qui est également gênant.

Cela ne fonctionne pas actuellement dans Chrome ou Firefox.