flex-grow 按权重分配主轴剩余空间，但受 flex-basis 制约；移动端应设 flex-basis: 0（如 flex: 1 1 0），避免默认值导致不等宽或失效；固定列用 flex: 0 0 width，自适应列用 flex: 1 1 0。
flex-grow 在移动端两列布局里到底怎么分空间
直接说结论：flex-grow 不是按比例“瓜分剩余空间”的直觉工具，它按权重分配的是「剩余空间」，而这个“剩余”受 flex-basis 影响极大——很多人设了 flex-grow: 1 却发现两列不等宽，就是因为没意识到初始尺寸先占了坑。
常见错误现象：flex-grow: 1 下左侧栏窄、右侧栏宽，或在小屏上溢出、换行失败；用 width: 50% 又在内容撑开后错位。
-
flex-grow只作用于「主轴剩余空间」，如果两列加起来已占满容器（比如都设了flex-basis: 50%），那它根本没空间可分 - 移动端推荐写法：显式设
flex-basis: 0，再靠flex-grow分配，比如flex: 1 1 0（即flex-grow: 1; flex-shrink: 1; flex-basis: 0） - 两列不等宽？改权重：左侧
flex: 2 1 0，右侧flex: 1 1 0，就得到 2:1 的剩余空间分配比
为什么 display: flex + flex-grow 在 iOS Safari 上有时不生效
不是 bug，是渲染时机和默认行为差异。iOS 14.5 之前，flex-basis: auto（默认值）在某些嵌套场景下会回退到内容宽度，导致 flex-grow 失效；同时，父容器若没设 height 或 min-height，又用了 align-items: stretch，子项高度可能被压缩得看不出效果。
- 兼容写法：给父容器加
min-height: 1px（防 Safari 折叠空 flex 容器） - 必须写
flex-basis，别依赖默认值；flex-basis: 0比flex-basis: 0%更可靠（后者在部分旧 Android WebView 中解析异常） - 避免在
flex子项上同时设width和flex-grow——CSS 会优先按width计算基础尺寸，flex-grow后续分配可能被压制
两列布局中，一列固定宽度、一列自适应，该不该用 flex-grow
该，但要用对。固定列不该靠 width，而应设 flex: 0 0 <px>；自适应列用 flex: 1 1 0。这样既保固定列不缩放，又让另一列真正“挤占剩余所有空间”，且响应式时不会因 width 冲突导致 overflow。
立即学习“前端免费学习笔记（深入）”；
- 错误示范：
left { width: 80px; } right { flex-grow: 1; }→ left 仍可能被shrink压缩（尤其内容少时） - 正确写法：
left { flex: 0 0 80px; } right { flex: 1 1 0; } - 如果固定列需响应式变化（如小屏隐藏），直接改
flex: 0 0 0+visibility: hidden，比display: none更稳——后者会破坏 flex 流，导致自适应列突然占满
flex-grow 分配后，内容超长换行失效怎么办
因为 flex-grow 只管主轴（通常是横向）伸缩，不影响交叉轴（纵向）的换行逻辑。如果文字不折行、容器溢出，问题不在 flex-grow，而在子元素的 white-space 和 overflow。
- 确保文字容器设了
word-break: break-word或overflow-wrap: break-word - 避免给 flex 子项设
white-space: nowrap（除非真不需要换行） - 如果子项是图片或卡片，记得加
max-width: 100%，否则flex-grow会把它拉得比容器还宽
复杂点在于：flex 布局的“自适应”本质是空间分配，不是内容控制。空间给了，内容怎么填、怎么折、怎么截，得靠另一层样式兜底——这点最容易被忽略。
