Safari 14–15.6中Flex子元素height: 100%不生效，因父Flex容器未被识别为有明确高度的上下文；需显式设父容器height，或改用align-items: stretch并移除height: 100%。
Flex子元素height: 100%在Safari 14–15.6里不生效
这是最常触发的场景：父容器设了display: flex，子元素写height: 100%，Chrome/Edge正常撑满，Safari却显示为height: auto——实际高度只有内容高度。
根本原因是 Safari 在这些版本中对 Flex 容器内百分比高度的解析逻辑有缺陷，它不会把父 Flex 容器当作“有明确高度的块级上下文”，导致子元素的height: 100%失去参照。
- 必须给父 Flex 容器显式设置
height（不能是min-height或flex: 1隐式推导） - 更稳妥的做法是改用
align-items: stretch（Flex 默认值），并去掉子元素的height: 100%——让 Flex 自己拉伸 - 如果子元素是绝对定位或有
position: absolute，那height: 100%在 Safari 中基本无效，得改用top: 0; bottom: 0
flex: 1子项在Safari中高度塌陷或溢出
当多个子项使用flex: 1均分空间时，Safari 14–15.6 可能出现某一项高度为0，或整个容器高度远超预期。这不是渲染错乱，而是flex-basis初始值被错误解析为auto后，又叠加了min-height: auto的默认行为。
- 显式写死
flex-basis，比如flex: 1 1 0（即flex: 1 1 0px），强制从零开始分配剩余空间 - 避免在
flex: 1子项内部再嵌套未设高度的 Flex 容器——Safari 对嵌套 Flex 的高度继承特别脆弱 - 检查是否意外设置了
min-height: unset或min-height: 0，某些 Safari 版本会因此跳过高度计算
align-items: stretch失效，子项没填满Flex容器高度
即使父容器有明确height，子元素也未设height，Safari 仍可能让子项保持内容高度，看起来像align-items: flex-start。
立即学习“前端免费学习笔记（深入）”；
这通常是因为子元素本身有min-height: auto且内部有弹性布局、图片或iframe等“不可测高”内容，触发了 Safari 的高度冻结逻辑。
- 给子元素加
min-height: 0（注意不是min-height: unset） - 若子元素含
<img alt="CSS如何修复Flex在部分Safari版本上高度计算错误" >，确保它有height: auto或显式尺寸；否则 Safari 会卡住其最小高度估算 - 慎用
overflow: hidden配合flex: 1——某些 Safari 版本会因此抑制 stretch 行为
justify-content: center + align-items: center在Safari中偏移
居中容器里的子元素，在 Safari 中看起来“偏下一点”或“贴底”，尤其当父容器高度由vh单位定义时。
本质是 Safari 对flex-direction: column下的justify-content: center和align-items: center组合存在基线对齐残留，而非真正的居中偏差。
- 给子元素加
margin: auto替代justify-content/align-items——这是最稳定、兼容性最好的居中方案 - 如果必须用 Flex 居中，给父容器加
align-content: center（对多行 Flex 有效）或line-height: 0（针对单行内联元素） - 避免同时设置
padding和justify-content: center，Safari 有时会把 padding 算进可用空间再居中，造成视觉偏移
真正麻烦的不是写法本身，而是 Safari 这些版本对“高度继承链”的判断太武断——哪怕只有一层min-height: auto没覆盖到，整个 Flex 高度就可能崩。上线前务必在真机 Safari 15.4–15.6 上验证关键容器的高度表现。
