如何解决CSS弹性盒子嵌套在Safari下的计算错误？-css教程-PHP中文网

safari旧版本（ios 13.3及更早）嵌套flex高度塌陷不是bug，而是因父容器缺显式宽高、子项默认min-width: auto导致拉伸被拒绝；需补全-webkit前缀、设min-width: 0/min-height: 0并避免混用width: 100%与flex: 1。

如何解决css弹性盒子嵌套在safari下的计算错误？

这不是bug，是Safari旧版本（iOS 13.3及更早）对嵌套Flex的计算逻辑更严格：父容器若没显式宽高、子项又带默认min-width: auto，它就拒绝拉伸——哪怕外层写了display: flex，内层也直接“放弃计算”。

常见现象：内层Flex容器高度为0、子项堆成一列、flex: 1完全无效
关键诱因：父容器是position: absolute但没写top/bottom/left/right；或外层Flex容器用flex-direction: column却没设height
别指望width: 100%或height: 100%自动继承——Safari需要明确的尺寸锚点，否则整个嵌套链路的Flex layout引擎不启动

只加display: -webkit-flex没用。Safari 9–13.1识别的是整套旧草案语法，漏一个前缀，整条规则就被忽略。

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

display: -webkit-flex必须在display: flex前面，且两者共存
所有容器级属性都要配前缀：-webkit-flex-direction、-webkit-justify-content、-webkit-align-items、-webkit-flex-wrap
flex缩写属性要换成-webkit-flex（不是-webkit-flex-box），且值顺序必须和标准版一致
autoprefixer不会自动加这些——除非browserslist里明确写了ios_saf >= 11.3或safari >= 10

Safari对flex: 1的收缩行为比Chrome更保守，默认min-width: auto会锁死宽度，导致无法拉伸；垂直方向同理。

水平布局下，给子项加min-width: 0
垂直布局下，加min-height: 0
避免混用flex: 1和width: 100%——Safari优先按width计算，flex被降级为无效声明
如果父容器是flex-direction: column，子项还用了margin: auto，Safari可能完全忽略居中，得改用align-self: center

别把-webkit-flex当万能钥匙。Android 4.4和Safari 6.1–8根本不认它，只响应更老的display: -webkit-box。

flex-direction: row → -webkit-box-orient: horizontal
justify-content: center → -webkit-box-pack: center
align-items: center → -webkit-box-align: center
flex-wrap: wrap在-webkit-box下无效——旧安卓没有换行概念，得靠JS或伪元素模拟
autoprefixer完全不管这套语法，必须手动写三套：display: -webkit-box、display: -ms-flexbox、display: flex，顺序不能错