结论：safari 9–15.6 中 flex-basis: auto 会被错误解析，导致 flex: 1 子项高度坍塌；必须显式设为 flex-basis: 0px 并配套 min-height: 0 才能可靠拉伸。
直接说结论：不要依赖 flex-basis: auto 在 Safari 中撑开高度——它在 iOS 9–15.6 多个版本里会被错误解析为 auto，导致 flex: 1 子项高度坍塌。必须显式覆盖。
为什么 flex-basis: auto 在 Safari 里会失效
标准中 flex: 1 等价于 flex: 1 1 0px，但旧 WebKit（Safari 9–12）和部分新版本（Safari 14–15.6）会把它当成 flex-basis: auto 处理；而 auto 又触发默认 min-height: auto 的冻结逻辑，结果子项只按内容高度收缩，不拉伸。
常见现象包括：
- 多个
flex: 1子项，其中一个高度为0 - 开发者工具里看到 computed
flex-basis是auto，不是0px - 嵌套 flex 容器中更明显，比如卡片内部再套
display: flex; flex-direction: column
用 flex-basis: 0px 替代 auto 的实操写法
这是最轻量、最可靠的补丁，切断 Safari 对 auto 的错误继承链。
水平均分（flex-direction: row）：
flex: 1 1 0px; /* 或拆解 */ flex-grow: 1; flex-shrink: 1; flex-basis: 0px;
垂直均分（flex-direction: column）：
flex: 1 1 0px; /* 注意：不能写 0%，Safari 会忽略 */
若需保留内容最小高度（仅限 Safari 12.1+）：
flex-basis: min-content;
但老版本仍必须用 0px。
必须配套加 min-height: 0
flex-basis: 0px 生效的前提，是子元素没被自身 min-height 卡住。Safari 默认 min-height: auto，会阻止拉伸启动。
给所有参与 flex: 1 分配的子元素加：
-
min-height: 0（垂直主轴）或min-width: 0（水平主轴） - 如果子元素含
<img>，额外加height: auto，否则 Safari 可能冻结其内在尺寸估算 - 避免写
min-height: unset——某些 Safari 版本会跳过整个高度计算流程
嵌套 flex 容器时容易漏掉的关键点
内层 flex 容器若本身是 flex: 1 子项，它也必须设 min-height: 0，否则 Safari 会沿用 min-height: auto 冻结其高度计算。
同时注意：
- 子容器若含
<img>，确保它有height: auto或显式宽高比容器 - 慎用
overflow: hidden配合flex: 1，某些 Safari 版本会因此抑制align-items: stretch - 如果子容器是绝对定位，
height: 100%在 Safari 中基本无效，得改用top: 0; bottom: 0
真正卡住人的不是 flex-basis 本身，而是它必须和父容器高度、子元素 min-height、以及 WebKit 对 auto 的特殊解释一起校准；少一个环节，坍塌就照常发生。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
