flex-grow 不能单独实现左右自适应布局，需满足三个前提：父容器设 display: flex、左侧用 flex: 0 0 200px（而非仅 width）并加 min-width: 0、右侧设 flex: 1 且 min-width: 0 防溢出。
flex-grow 本身不能单独实现左右两栏自适应布局，它只是分配「主轴剩余空间」的工具。真正起效的前提是：父容器必须为 display: flex，左侧固定栏必须锁死不缩放，右侧栏需从零开始参与分配——否则你写的 flex-grow: 1 就是摆设。
为什么只写 flex-grow: 1 右侧就是不撑满
常见现象：右侧窄得可怜、内容换行错乱、甚至和左侧一样宽。根本原因不是语法错，而是没满足三个硬性条件：
-
.container缺少display: flex—— 整个 Flex 上下文不存在，flex-grow直接被忽略 - 左侧只写了
width: 200px却没配flex-shrink: 0—— 小屏下它会被压缩，反过来挤占本该属于右侧的空间 - 右侧的
flex-basis是默认的auto（即按内容宽度算初始尺寸），遇到长 URL 或未设min-width: 0的嵌套容器，它就“自膨胀”，没空间留给flex-grow
flex: 0 0 200px 和 width: 200px 的实际区别
前者是 Flex 层语义：不放大、不缩小、基准就是 200px；后者只是盒模型初始宽度，在 Flex 容器里仍可能被 flex-shrink 压缩。小屏下左侧菜单文字换行、图标错位，八成是用了 width 却漏了 flex-shrink: 0。
- 推荐写法：
.sidebar { flex: 0 0 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - 避免混用：
width和flex-basis同时存在可能触发浏览器计算冲突 - 响应式切换更安全：
@media (max-width: 768px) { .sidebar { flex: 0 0 60px; } }
右侧必须加 min-width: 0 才能真自适应
Flex 子项默认 min-width: auto，遇到长单词、URL 或未设 word-break 的文本，它宁可横向溢出也不收缩。结果就是意外出现横向滚动条，或整个布局被压垮。
- 必加样式：
.main { flex: 1; box-sizing: border-box; min-width: 0; } - 配套处理：
overflow-wrap: break-word或word-break: break-word防止内部长文本溢出 - Safari 14–15 下若右侧有
border或padding且没设box-sizing: border-box，flex-grow算出的剩余空间会偏小，右侧可能变窄甚至消失
真正卡住布局的，从来不是“怎么写”，而是那些隐式约束：父容器有没有明确高度来源、祖先节点是否被 overflow: hidden 截断、flex-basis 是不是还在依赖默认值——这些地方不检查，光调 flex-grow 数值毫无意义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
