CSS Flexbox を使用してコンテナ内の残りの垂直スペースを埋めるにはどうすればよいですか?

残りの垂直方向のスペースを #second で埋める

#first の下にある #wrapper の残りの垂直方向のスペースを #first div で埋めるには、次を使用します。 CSS のみを使用する場合は、次の手順を実行できます。

1. 余白なしで 100% の高さを占めるように HTML と本文を設定します。
2. display: flex, flex-direction: column を親コンテナ .w​​rapper.
3. .first に特定の高さを与えます。
4. 残りのスペースを占めるように伸縮させるには、flex-grow: 1 を .sec に設定します。

CSS コードは次のとおりです:

<code class="css">html, body {
  height: 100%;
  margin: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 100%;
}

.first {
  height: 50px;
}

.second {
  flex-grow: 1;
}</code>

<code class="html"><div class="wrapper">
  <div class="first" style="background:#b2efd8">First</div>
  <div class="second" style="background:#80c7cd">Second</div>
</div></code>

以上がCSS Flexbox を使用してコンテナ内の残りの垂直スペースを埋めるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。