如何使用 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中文网其他相关文章！