Html 在Safari上未正确渲染Flex网格-Flex项目上没有高度

下面是一个在Chrome和Safari上运行的简单HTML表：

.container{
高度：100vh；
溢出y：隐藏；
背景色：黑色；
颜色：白色；
}
.行容器{
身高：100%；
宽度：100%；
显示器：flex；
弯曲方向：立柱；
溢出y：自动；
背景颜色：蓝色；
}
.行集装箱{
宽度：100%；
身高：100%；
显示器：flex；
弯曲方向：行；
边框：1px固体青色；
}

试验
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个

Safari以不同于其他浏览器的方式呈现

flex shrink

只需在行项目上禁用它

将此添加到您的代码中：

.row-container {
  flex-shrink: 0;
}

.container{
高度：100vh；
显示器：flex；
弯曲方向：立柱；
背景色：黑色；
颜色：白色；
}
.行容器{
显示器：flex；
弯曲方向：立柱；
溢出y：自动；
背景颜色：蓝色；
}
.行集装箱{
弹性收缩：0；/*新*/
显示器：flex；
边框：1px固体青色；
}
h1{
保证金：0；
}
身体{
保证金：0；
}

试验
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个
一个
两个

看看Safari如何呈现它，这真是太疯狂了。chrome是预期的布局吗？为什么高度：所有东西都是100%的？是的，镀铬是设计的布局。flex容器上的高度是必需的，因为此组件已添加到对象链中。在flex项目上只是一个尝试，让它变得更糟糕…在Safari中对我来说很好：@jons，在codepen上对我来说也很好。。。但当你点击上面的“运行代码片段”时，我就发现了这种错误行为，在我的应用程序上也是如此。。。。非常奇怪…非常奇怪。你确定将高度设置为100%不会导致某些原因吗？我的理由是找到一种方法使行高度增加，但解决方案是使行高度不收缩。。。谢谢你的帮助-很有魅力。