flex-basis: auto在Safari 9–12和IE10–11中必然出错，因旧WebKit将其解析为auto导致高度坍缩，IE10完全忽略、IE11计算错误常得0；须改用flex-basis: 0px（Safari）或0%（IE），并配套min-height: 0、box-sizing: border-box及父容器高度锚点。
老版本 Safari（iOS 9–12.4 / macOS Safari 9–12）和 IE10–11 对 flex-basis 的解析与标准严重不一致，不是“偶尔不准”，而是根本性错判——flex: 1 被当成 flex: 1 1 auto，flex-basis: auto 在 IE 中常被忽略或算成 0。修复必须绕过默认行为，用显式值覆盖。
为什么 flex-basis: auto 在 Safari 9–12 和 IE 中必然出错
旧 WebKit 把 flex: 1 解析为 flex-basis: auto，而 auto 意味着“按内容推算初始尺寸”。一旦父容器高度未锚定（比如只靠 height: 100%），子项就坍缩为 0；IE10 则完全不识别 flex-basis: auto，直接退化为块级行为，IE11 虽能解析但计算时机错误，常拍板为 0。
DevTools 里能看到 computed 的 flex-basis 是 auto 或空值，这就是根源。
- 现象：多个
flex: 1子项中一个高度为 0，或整行/列高度远小于父容器 - 嵌套 Flex 容器（如卡片内再套
flex-direction: column）时问题更剧烈 - 缩放页面、软键盘弹出后错位加剧，本质是尺寸重算链断裂
必须写死 flex-basis 值，且单位只能是 px 或 %
flex-basis: 0px 是 Safari 9–12 最可靠解法，flex-basis: 0% 是 IE10–11 必选项——二者不能混用，也不能省略单位。
立即学习“前端免费学习笔记（深入）”；
- Safari 会直接忽略
flex-basis: 0%，所以垂直布局中必须用flex-basis: 0px - IE10 不识别无单位的
0，必须写flex-basis: 0%或配-ms-flex-preferred-size: 0% - 别用
flex-basis: min-content：Safari 12.1+ 才支持，老版本无效 - 若需保留内容最小高度，不要依赖
auto，改用像素值 +min-height显式控制
flex-basis 生效的前提：配套 min-height/min-width 和盒模型
flex-basis: 0px 单独写没用。Safari 旧版会因默认 min-height: auto 阻断拉伸启动；IE 中 padding/border 会让百分比失效。
- 所有参与分配的子元素必须加
min-height: 0（垂直主轴）或min-width: 0（水平主轴） - 所有 flex 子项强制
box-sizing: border-box，否则flex-basis: 200px实际占位可能是 228px - IE10 必须写
display: -ms-flexbox，且子项用-ms-flex: 0 0 33.33%，不能只靠标准声明 - 含
<img>的子项额外加height: auto，否则 Safari 可能冻结其内在尺寸估算
父容器高度锚点不能依赖 height: 100%
height: 100% 在 Safari 和 IE 中极易断链：只要任意一层祖先没设高度，整条链归零。而 min-height 不依赖上游，自己就能“立住”基准。
- 优先用
min-height: 100dvh（Safari 16.4+ 支持），回退到min-height: -webkit-fill-available或min-height: 100vh - 避免直接给
<html>或<body>设min-height，某些安卓 WebView 会忽略；作用于主布局容器（如#root）更可靠 - 若用
height: 100vh，键盘弹出时会被锁定为初始视口高，导致内容被截断；改用min-height: 100dvh; max-height: 100dvh; overflow-y: auto
真正卡住人的不是 flex-basis 本身，而是它必须和父容器高度、子元素 min-height、WebKit 对 auto 的特殊解释、以及 IE 的前缀语法一起校准——少一个环节，坍塌就照常发生。
