结论：用flex: 1 1 0替代flex: 1，再配min-width: 0和明确父容器高度来源，否则在ios safari或android webview中大概率崩；根本原因是flex-grow只分配主轴剩余空间，而ios默认flex-basis: auto按内容宽计算初始尺寸，导致无剩余空间可分，且需显式三值写法、min-height: 1px及flex-shrink: 0等防御性样式保障稳定性。
直接说结论：用 flex: 1 1 0 替代 flex: 1，再配 min-width: 0 和明确的父容器高度来源，否则在 iOS Safari 或 Android WebView 中大概率崩。
为什么 flex: 1 在移动端经常不生效
不是 flex-grow 失效，而是它只分「主轴剩余空间」，而这个“剩余”被隐式 flex-basis 吃掉了：
- iOS Safari 默认
flex-basis: auto，按内容宽度算初始尺寸——中间栏哪怕只有一行文字，也可能撑满整行，没空间可 grow - 父容器没设
min-height或被overflow: hidden截断，计算出的剩余空间是 0 - 左右栏只写
width没禁用收缩，窄屏时被压缩，反而挤压中间区域
flex: 0 0 宽度 和 flex: 1 1 0 必须显式写全
三值写法能绕过各浏览器对默认 flex-basis 的解析差异，尤其在 iOS 14.5+ 和 Android WebView 中更稳定：
- 左栏：
flex: 0 0 80px—— 不伸缩、不收缩、基准宽 80px - 中间栏：
flex: 1 1 0—— 可伸缩、可收缩、基准宽为 0，真正从零开始分剩余空间 - 右栏：
flex: 0 0 60px—— 同左栏，宽度可不同 - 避免左右栏同时写
width和flex，CSS 会优先按width计算基础尺寸，flex-shrink: 0可能被忽略
移动端必须加的防御性样式
仅靠 flex 属性还不够，这几行是防止小屏崩溃的关键：
- 给中间区域加
min-width: 0：防止内部长文本或内联元素（如<span></span>）强制撑宽容器 - 给父容器加
min-height: 1px：iOS Safari 对空 flex 容器可能渲染高度为 0，导致子项无空间可分 - 若中间需滚动，只在中间区域的直接子容器上设
overflow-y: auto，别动外层.center的height或max-height - 父容器必须有
display: flex，且不能被float或position: absolute干扰
最容易被忽略的点是：布局崩坏往往不是 flex-grow 的问题，而是祖先节点的高度约束缺失，或 flex-basis 的隐式取值干扰。检查时优先看父容器有没有明确高度来源（比如 min-height: 100vh）、有没有被 overflow: hidden 包裹、以及左右栏是否真的锁死了收缩行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
