Safari中Flex容器高度为0等问题源于高度计算链中断，需为直接父级设min-height、确保html/body有高度基准、嵌套Flex中设flex:1 1 0px和min-height:0、column布局下用flex替代height百分比、并清除干扰align-items:stretch的样式。
当你在Safari中看到Flex容器突然高度为0、子元素不拉伸、背景色消失或内容被裁剪，问题往往不是代码写错了，而是高度计算链在某个环节彻底中断——Safari对Flex高度的解析比其他浏览器更严格，漏掉一个min-height或写错一个flex-basis，整条链就断了。
给Flex容器的直接父级设min-height
Flex容器自身不会凭空产生高度，它只响应来自上层的明确高度输入。如果它的父元素是
在CSS中定位到Flex容器的**直接父元素**，添加min-height（不是height）。
例如：.wrapper { min-height: 300px; } 或更通用的 .wrapper { min-height: 100vh; }。用min-height比height更安全，避免内容超长时被截断。
【必须检查html和body】 如果.wrapper是页面最外层容器，务必确认html, body也设置了高度基准，否则100vh在Safari中会退化为auto。标准写法：html, body { height: 100%; margin: 0; }
修复嵌套Flex中内层容器的高度冻结
当Flex容器内部再嵌套一个display: flex子项（比如卡片里套一个flex-column布局），Safari旧版（iOS 9–12.4 / macOS Safari 9–12）会因错误解析flex-basis而让内层容器拒绝拉伸。
方法一：显式重写flex-basis和min-height
对内层Flex子项（即嵌套的那层）添加：flex: 1 1 0px; min-height: 0;
注意：不能写flex-basis: 0%，Safari会直接忽略；必须是0px。min-height: 0不是可选项，它是解除Safari默认min-height: auto冻结行为的关键开关。
方法二：若内层含图片，同步加height: auto
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
如果该内层子项里有，必须额外加上img { height: auto; }，否则Safari无法估算其最小内在高度，flex-basis: 0px仍不生效。
替换height百分比为flex-basis控制垂直空间分配
在flex-direction: column布局下，给子元素写height: 60%几乎总是失效——这不是你写错了，而是CSS规范要求百分比高度必须基于“有明确height值”的父容器，而column流中父Flex容器的高度常仍是auto。
第一步：确认父容器已有确定高度（如min-height: 100vh）
第二步：将子元素的height: 60%改为flex: 0 0 60%;
第三步：确保该子元素没有同时设置height属性——Safari会优先按height计算，导致flex-grow失效。二者逻辑冲突，只能留一个。
这一步操作起来很简单，直接把原height声明删掉，换上flex声明即可。
强制触发align-items: stretch并排除干扰项
align-items: stretch是Flex容器默认行为，但它只在“交叉轴有可用空间”时才启动。一旦子元素自己写了height、max-height或align-self，stretch就被覆盖了。
先清掉所有子元素上的height、max-height、min-height（除非你真需要）、以及align-self: flex-start等显式对齐覆盖。
然后在父容器上明确写出align-items: stretch;——别依赖默认值，Safari某些版本在动态渲染后可能丢失该状态。
如果只需某一个子元素撑高（比如主内容区），可在该元素上单独加align-self: stretch;，它会覆盖父级设置，且不影响其他子项。
