<分区>
<分区>
根据 CSS-tricks 文档，使用 justify-content: stretch，flexbox 子项应该在其容器内拉伸(stretch)以填充可用空间。
我有一个 flexbox 容器，我将主轴设置为列方向，然后在这个容器中我放置了两个 div flexbox 元素。我希望它们平均填充可用的垂直空间(所以我相信 flex: 0 1 auto 应该这样做)。
这是 JS fiddle :
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>最佳答案
正如@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>关于html - 为什么 flexbox 子项不拉伸(stretch)以填充父容器(包括 jsfiddle)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51274336/