Html 为什么flexbox子项没有拉伸以填充父容器（包括JSFIDLE）？

根据CSS技巧文档，使用

justify content:stretch

，flexbox子项应在其容器内拉伸以填充可用空间。 我有一个flexbox容器，其中我将主轴设置为列方向，然后在此容器中放置两个div flexbox项。我希望它们能够均匀地填充可用的垂直空间（因此我认为

flex:01 auto

应该这样做）

以下是JS小提琴：

正文{
身高：100%
}
.集装箱{
高度：300px；
显示器：flex；
弯曲方向：立柱；
证明内容：拉伸；
边框：1px纯灰；
}
.在{
高度：25px；
边框：1px纯黑；
flex:01自动；
}

在…内
在…内

正如@Temani Afif所指出的：

正文{
身高：100%
}
.集装箱{
高度：300px；
显示器：flex；
弯曲方向：立柱；
证明内容：拉伸；
边框：1px纯灰；
}
.在{
高度：25px；
边框：1px纯黑；
flex:1自动；
}

在…内
在…内

但您指定了固定高度。。它是flex:11 auto所以把.in的高度改成百分比？我不需要指定高度，因为您希望它填充空间，只需考虑<代码> Flex 属性。