移动端用flex-grow实现左右固定、中间自适应，核心是左右栏设flex: 0 0 宽度、中间栏设flex: 1 1 0，并配min-width: 0、父容器display: flex及明确高度来源，否则小屏易溢出或塌陷。
移动端用 flex-grow 实现左右固定、中间自适应，核心不是“设了 flex-grow: 1 就完事”，而是必须配合 flex-basis 和 flex-shrink 控制初始尺寸与压缩行为——否则在小屏下极易溢出、换行或塌陷。
为什么 flex-grow: 1 在移动端常失效
常见现象：左右栏宽度正常，中间区域没撑开、内容被截断、甚至整行换行。根本原因不是 flex-grow 不起作用，而是它只分配「主轴剩余空间」，而这个“剩余”受 flex-basis 初始值主导：
- iOS Safari 默认
flex-basis: auto，会按内容宽度计算初始尺寸，导致中间项还没机会 grow 就已占满容器 - 父容器未设
min-height或被overflow: hidden截断，flex 剩余空间算出来是 0 - 左右栏仅用
width而没禁用收缩（flex-shrink: 0），窄屏时被压缩，反而挤压中间区域
flex: 1 1 0 比 flex-grow: 1 更可靠
显式写三值能绕过各浏览器对默认 flex-basis 的解析差异，尤其在 iOS 14.5+ 和 Android WebView 中更稳定：
- 左栏：
flex: 0 0 80px—— 不伸缩、不收缩、基准宽 80px - 中间栏：
flex: 1 1 0—— 可伸缩、可收缩、基准宽为 0，真正从零开始分剩余空间 - 右栏：
flex: 0 0 60px—— 同左栏，宽度可不同 - 父容器必须有
display: flex且不能被float或position干扰
移动端必须加的防御性样式
仅靠 flex 属性还不够，以下几行是防止小屏崩溃的关键：
- 给中间区域加
min-width: 0：防止内部长文本或内联元素强制撑宽容器 - 给父容器加
min-height: 1px：iOS Safari 对空 flex 容器可能渲染高度为 0，导致子项无空间可分 - 若中间需滚动，只在中间区域的直接子容器上设
overflow-y: auto，别动外层.middle的height或max-height - 避免在左右栏同时写
width和flex，CSS 会优先按width计算基础尺寸，flex-shrink: 0可能被忽略
最容易被忽略的点是：移动端布局崩坏往往不是 flex-grow 本身的问题，而是祖先节点的高度约束缺失或 flex-basis 的隐式取值干扰。检查时优先看父容器有没有明确高度来源（比如 min-height: 100vh）、有没有被 overflow: hidden 包裹、以及左右栏是否真的锁死了收缩行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
