Html 另一个Flex元素中的Flex元素在Safari上折叠

我在Chrome上得到了这段代码，其中第一个flex项目的内容需要与底部对齐，并在必要时进行拉伸：

正文{
高度：100vh；
颜色：白色；
字体大小：粗体；
字号：2em；
文本对齐：居中；
}
.柔性容器{
填充：0；
保证金：0；
身高：100%；
显示器：flex；
弯曲方向：立柱；
}
.弹性项目{
背景：番茄；
填充：10px；
边框：5px纯红；
flex:01自动；
}
.弹性拉伸{
身高：100%；
显示器：flex；
弯曲方向：立柱；
证明内容：柔性端；
flex:1自动；
}

1.
2
2
2
2
2
2
2
2
3.

由于使用flexbox，因此不应明确定义高度。我认为删除

高度：“100%”

并同时设置

.flex-stretch{flex:1 0 auto；}

（0 flex-shrink）将满足您的需要。

您已经在

flex-stretch

类样式中将

flex-shrink

设置为1。尝试

flex:10 auto

或给它一个

minheight

，它不应该缩小到下面。我无法设置minheight，因为它取决于该div的内容，我还需要该div根据剩余空间缩小或增大。如果您运行代码片段并单击完整页面，您可以在Chrome中看到div有增长空间时所需的行为：）I“已解决”它使用JavaScript，其中我有一个div，其内容在.flex stretch div内，如果该div的高度>=到.flex stretch div的高度，我将.flex stretch的显示改为block而不是flex。现在还可以，但我很想通过CSS解决。谢谢！这正是我需要的！