应显式写死flex-basis值：safari 9–12和ie10/11将flex:1或flex:1 1 auto中的flex-basis错误解析为auto，导致高度坍塌、换行失效；垂直均分用flex-basis:0px，水平三栏用33.33%，固定场景用200px，并配合min-height:0或min-width:0及box-sizing:border-box确保稳定生效。
flex-basis 在 Safari/IE 中被当成 auto 怎么办
这不是你写错了，是 Safari 9–12 和 IE10/11 的渲染引擎压根不按标准解析 flex: 1 或 flex: 1 1 auto —— 它们会把 flex-basis 当成 auto，然后按内容宽度推导，结果就是高度坍塌、换行失效、宽度飘忽。
最直接的解法：显式写死 flex-basis 值，切断自动推导链。
- 垂直均分（
flex-direction: column）：用flex-basis: 0px，别写0%（Safari 会忽略） - 水平等宽三栏：用
flex-basis: 33.33%，不是33%（IE 对小数截断敏感） - 固定像素场景：统一用
flex-basis: 200px，比混用width+flex更可靠
为什么不能靠 width 控制 flex 子项初始宽度
width 在 flex 容器中只是 flex-basis 的 fallback，优先级更低。一旦你写了 flex-basis，width 就被完全忽略；但如果你没写 flex-basis，浏览器又会先查 width 再查内容，逻辑嵌套容易误判。
典型翻车现场：
-
width: 200px; flex: 1→ 实际flex-basis是auto，仍会测量内容宽度，结果不可控 -
width: 200px; flex: 0 0 auto→ 这时width才生效，但 IE 下auto又被忽略，退回到内容撑开 -
width: 200px; box-sizing: border-box+ 未设flex-basis→ Safari 可能取 content-box 下的 200px，IE 可能取带 padding 的总宽，基准已不一致
box-sizing 和 flex-basis 怎么配才不冲突
flex-basis 默认按 content-box 计算，也就是你写的 200px 指的是内容区宽度。只要子项有 padding 或 border，实际占位就超了 200px，不同浏览器对“是否允许压缩到 padding 内”的判断也不一样。
安全做法：
- 所有 flex 子项统一加
box-sizing: border-box - 如果用了
padding: 10px，写flex-basis: calc(200px - 20px)主动预留空间 - 或者干脆放弃百分比/像素混合，改用
flex: 0 0 200px+min-width: 0防止内容撑开
IE11 换行失效、Safari 高度坍塌，背后其实是同一类问题
它们都卡在同一个环节：浏览器没拿到确定的 flex-basis 基准值，于是退回到内容测量逻辑，而内容测量在各内核中差异极大——Safari 测量延迟、IE 测量跳过、Firefox 测量偏保守。
所以真正要盯住的不是“怎么让 width 生效”，而是“怎么让 flex-basis 稳定落地”：
- 避免
auto、0%、min-content（老版本不支持）这类模糊值 - 百分比值必须配合
box-sizing: border-box，否则 IE 会因 padding 撑出导致换行判断失效 - 所有参与
flex: 1分配的子项，必须同步加min-height: 0（column）或min-width: 0（row），否则 Safari/IE 会卡住拉伸起点
复杂点不在属性多，而在每个属性都要和渲染引擎的 fallback 行为对齐。少一个 min-width: 0，前面写的 flex-basis: 0px 就白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
