[解決済み] Flexboxの子の高さを親の高さの100％にするには？

質問

フレックスボックス内のフレックスアイテムの縦幅を埋めたいのですが、どうすればいいですか？

.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>

そしてこちらが JSFiddle

flex-2-child は、2つのケースを除いて、必要な高さを満たしていません。

1. flex-2 は高さが100％です（フレックスアイテムはデフォルトで100％なので変です＋Chromeではバグがあります）。
2. flex-2-child は位置が絶対的であるため、不便である。

現在、ChromeやFirefoxでは動作しません。

解決するには？

使用方法 align-items: stretch

David Storeyの答えと似ていますが、私の回避策は。

.flex-2 {
    display: flex;
    align-items: stretch;
}

なお height: 100% は子コンポーネントから削除する必要があります (コメント参照)。

に代わるものとして align-items を使用することができます。 align-self の上だけです。 .flex-2-child のように、伸ばしたい項目を指定します。