根本原因不是浏览器“实现有 bug”，而是 CSS 规范中 flex-basis: auto 依赖主轴尺寸计算，而 Chrome 回退 content-box、Firefox 倾向 min-content、Safari 易误判约束致重置为 0px。
flex-basis: auto 在 Chrome/Firefox/Safari 中为何渲染不一致
根本原因不是浏览器“实现有 bug”，而是 CSS 规范里 flex-basis: auto 的计算逻辑依赖主轴尺寸，而各引擎对「未设宽高的元素」推导方式不同：flex-basis: auto 在 Chrome（Blink）中回退到 content-box 尺寸；Firefox（Gecko）倾向按 min-content 推导；Safari（WebKit）在嵌套或受 max-width 影响时，可能误判约束条件，把 flex-basis 重置为 0px。
典型现象包括：同一段代码在 Safari 中某子项突然塌缩成一条线，Chrome 和 Firefox 却正常撑开；文字没换行、但容器宽度被压扁；flex: 1 下内容被截断或挤出视口。
- 不要指望
flex-basis: auto在跨浏览器场景下行为稳定——它天生就是语义模糊的“兜底值” - 若子项含图片或设置了
width，flex-basis: auto会优先取该width值，此时差异变小，但 Safari 仍可能因box-sizing或父级flex-direction变化触发误判 - 调试时打开 DevTools 的 Layout 面板，直接看 Computed 栏里的
flex-basis实际解析值，比猜更可靠
IE10/11 中 flex-basis 完全失效怎么办
flex-basis 在 IE10 和 IE11 中不是“部分支持”，是压根不解析——写了 flex-basis: 200px 也等于没写。此时布局会退回到 width 或 auto 行为，导致三栏错位、按钮被压缩、flex: 0 0 33.33% 失效等。
实操上不能只加前缀，必须改写声明方式：
立即学习“前端免费学习笔记（深入）”；
- 用
-ms-flex替代flex：比如-ms-flex: 0 0 33.33%，并确保同时声明width: 33.33% - 所有涉及
flex-basis的地方，避免用auto或fit-content，统一替换为具体值（如200px、33.33%） - 必须加
box-sizing: border-box，否则 IE 下 padding/border 会撑出容器——且注意 IE11 对box-sizing: border-box在 flex 项中支持不稳定，建议所有 flex 子项都显式设box-sizing
用 flex-basis: 0 + flex-grow: 1 组合替代 auto 最稳
这是目前跨浏览器兼容性最高、行为最可预测的写法。当设为 flex-basis: 0 时，浏览器统一将初始占位视为 0，后续空间完全由 flex-grow 按比例分配，绕开了各引擎对 auto 的歧义解析。
适用场景明确：
- 等分布局（如导航栏菜单项）：用
flex: 1 1 0，比flex: 1更可控 - 中间弹性区（如侧边栏+主内容）：左侧固定宽，主内容写
flex: 1 1 0，不依赖其内容宽度 - 配合
min-width使用时，flex-basis: 0不会和min-width冲突，而flex-basis: auto在 Safari 中可能让min-width失效
注意：flex: 1 是 flex: 1 1 0 的简写，但 IE10/11 不识别该简写，必须拆开写全三个值。
flex-shrink 配合 min-width: 0 才能防 Safari 塌缩
Safari 在空间不足时，常把 flex-basis: auto 的子项暴力压缩到远小于内容宽度，导致文字折行、留白消失、按钮变形。这不是靠调 flex-shrink 数值就能解决的——关键是补上 min-width: 0。
原因在于 Safari 默认把 min-width: auto 解析为“至少容纳第一个单词”，而 Chrome/Firefox 会尊重内容最小宽度。加 min-width: 0 后，flex-shrink 才真正起作用：
-
flex-shrink: 0：彻底禁用收缩，适合图标按钮、标签等不可压缩元素 -
flex-shrink: 1（默认）：必须配min-width: 0，否则 Safari 仍卡死在“首词宽度” - 避免用
flex-shrink: 99这类大数值——它不会加快收缩，反而可能触发 WebKit 权重计算偏差，导致比例失衡
真正难的不是选哪个值，而是在改 flex-shrink 前，先确认 flex-basis 是否真实反映你想要的初始占位；否则再调参数也只是在错误基础上打补丁。
