时间戳

首页 > 解决方案 > 为什么 flexbox 子项不拉伸以填充父容器（包括 jsfiddle）？

html - 为什么 flexbox 子项不拉伸以填充父容器（包括 jsfiddle）？

问题描述

根据有关 CSS-tricks 的文档，使用justify-content: stretchflexbox 子项应在其容器内拉伸以填充可用空间。我有一个 flexbox 容器，我将主轴设置为列方向，然后在这个容器中放置两个 div flexbox 项。我希望他们平等地填充可用的垂直空间（所以我相信flex: 0 1 auto应该这样做）。

这是JS小提琴：

body {
  height: 100%
}

.container {
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  border: 1px solid grey;
}

.in {
  height: 25px;
  border: 1px solid black;
  flex: 0 1 auto;
}
<div class="container">
  <div class="in">Inside</div>
  <div class="in">
  Inside
  </div>
</div>

标签： htmlcssflexbox

解决方案

正如@Temani Afif 所指出的：

body {
  height: 100%
}

.container {
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  border: 1px solid grey;
}

.in {
  height: 25px;
  border: 1px solid black;
  flex: 1 1 auto;
}
<div class="container">
  <div class="in">Inside</div>
  <div class="in">
  Inside
  </div>
</div>

推荐阅读