如何使用 CSS Flexbox 填充容器中剩餘的垂直空間？

用#second填滿剩餘的垂直空間

為了用#second div填滿#first下#wrapper的剩餘垂直空間，使用僅使用CSS，您可以採取以下步驟：

1. 將html 和body 設定為佔據100% 高度，沒有邊距。
2. 將 display: flex、flex-direction: column 指派給父容器.wrapper。
3. 給.first指定具體高度。
4. 將flex-grow: 1設為.second，使其拉伸以佔據剩餘空間。

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中文網其他相關文章！