☰

Flexbox の子の高さを親の高さの 100% にするにはどうすればいいですか? 質問する

tag-icon • tag-icon css flexbox
Flexbox の子の高さを親の高さの 100% にするにはどうすればいいですか? 質問する

Flexbox 内の flex アイテムの垂直スペースを埋めようとしています。

.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 では動作しません。

ベストアンサー1

使用align-items: stretch

David Storey の回答と同様に、私の回避策は次のとおりです。

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

height: 100%子コンポーネントから削除する必要があることに注意してください(コメントを参照)。

の代わりに、伸ばしたいアイテムだけにalign-items使用することも可能です。align-self.flex-2-child

おすすめ記事