Flexbox子项在Safari中崩溃[重复]
Posted
技术标签:
【中文标题】Flexbox子项在Safari中崩溃[重复]【英文标题】：Flexbox children collapse in Safari [duplicate] 【发布时间】：2021-04-28 23:09:12 【问题描述】：Flexbox 子项在 Safari 中折叠，但在其他浏览器中不折叠。这是最小的示例 (JSFiddle)：
<html>
<body style="display: flex;height: 100vh;flex-flow: column;">
<div style="display: flex;background: red;">
<div style="padding: 1rem;">test</div>
</div>
<div style="height: 1000rem;"></div>
</body>
</html>这里我们有一个带有红色背景的div，用一些填充包裹另一个div。还有一个非常高的 flex child (1000rem)。
在 Chrome 或 Firefox 中，结果看起来很正常。红色的 flex 孩子正确地包裹了自己的孩子：
现在在 Safari 中它看起来完全错误（在版本 14.0.2 (16610.3.7.1.9) 上测试）- 第二个高子导致第一个崩溃：
红孩子虽然生了孩子，但还是晕倒了。看起来浏览器应用的默认 min-height: auto 在 Safari 中被忽略了。
是否有使 Safari 符合规范的解决方法？
【问题讨论】：
flex-shrink:0 到红色 div？ 可能重复：***.com/q/57044598/3597276 @TemaniAfif 它如何在其他浏览器中工作？* flex-shrink: 0 安全吗？我需要让整个网站正常工作
我不认为启用收缩到所有元素是安全的，你会有不必要的溢出。只需为您有问题的元素执行此操作
@TemaniAfif 我不同意这个问题是重复的。我在问“是否有一种解决方法可以让 Safari 按照规范运行？”不是“我需要改变什么才能让它在 Safari 中看起来不错”
【参考方案1】：
你能检查下面的代码链接吗？希望它对你有用。我们在正文中添加了flex-wrap:wrap;，并在其最后一个子项中添加了flex:1;，因此它将占据全宽。
请参考此链接：https://jsfiddle.net/yudizsolutions/4oh5sb3a/1/
<body style="display: flex; display: -webkit-flex; height: 100vh;flex-flow: column; flex-wrap:wrap; -webkit-flex-wrap:wrap; ">
<div style="display: flex;background: red; ">
<div style="padding: 1rem;">test</div>
</div>
<div style="height: 1000rem; flex:1;"></div>
</body>【讨论】：
谢谢，但这并不能回答我的问题：“有没有一种解决方法可以使 Safari 的行为符合规范？”以上是关于Flexbox子项在Safari中崩溃[重复]的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Safari 中将 flex 容器的绝对定位子项居中？
Flexbox 在 Safari 9.1.1 上不起作用 [重复]
嵌套的 Flexbox 100% 高度在 Safari 中不起作用 [重复]