Safari旧版本（iOS 13.3及更早）嵌套Flex高度塌陷不是bug，而是因父容器缺显式宽高、子项默认min-width: auto导致拉伸被拒绝；需补全-webkit前缀、设min-width: 0/min-height: 0并避免混用width: 100%与flex: 1。
为什么Safari里嵌套Flex容器高度塌陷或子项不撑满
这不是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必须成对补全所有容器属性
只加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
嵌套Flex子项的min-width/min-height必须重置
Safari对flex: 1的收缩行为比Chrome更保守，默认min-width: auto会锁死宽度，导致无法拉伸；垂直方向同理。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 水平布局下，给子项加
min-width: 0 - 垂直布局下，加
min-height: 0 - 避免混用
flex: 1和width: 100%——Safari优先按width计算，flex被降级为无效声明 - 如果父容器是
flex-direction: column，子项还用了margin: auto，Safari可能完全忽略居中，得改用align-self: center
Android 4.4 WebView和Safari 6.1–8要用-webkit-box
别把-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，顺序不能错
flex-basis、margin: auto、align-content的解析差异——它们不报错，也不标灰，只是悄悄算错。实机真机调试不可跳过。 
