右侧不撑满的根本原因是父容器未设display: flex或左侧元素无明确宽度；应设父容器display: flex，左侧用flex: 0 0 200px，右侧用flex: 1，并注意ie11需加width: 100%及flex: 1 1 0。
flex-grow 为什么右侧不撑满？
常见现象是给右侧元素设 flex-grow: 1，但实际没占满剩余空间——根本原因通常是父容器没设 display: flex，或者左侧元素没明确宽度（比如用了 width: auto 却没限制内容长度）。flex-grow 只在 flex 容器内生效，且只对“主轴剩余空间”起作用。
实操建议：
- 确保父容器有
display: flex和flex-direction: row（默认就是） - 左侧固定宽元素必须有明确尺寸，推荐用
flex: 0 0 200px（等价于flex-shrink: 0; flex-grow: 0; width: 200px），而不是只写width: 200px - 右侧元素设
flex: 1，比单独写flex-grow: 1更稳妥（它同时隐式设置flex-shrink: 1和flex-basis: 0，避免内容溢出时错乱）
左侧定宽用 width 还是 flex 值？
直接写 width: 200px 看似简单，但容易在响应式或内容超长时失效：如果左侧文字太多，会撑开容器、破坏布局；而 flex: 0 0 200px 能锁死基础尺寸，且禁止缩放（flex-shrink: 0），更符合“固定”的本意。
实操建议：
- 左侧元素用
flex: 0 0 200px，再加overflow: hidden; text-overflow: ellipsis; white-space: nowrap防文字溢出 - 避免用
min-width或max-width单独控制，它们不参与 flex 分配逻辑 - 如果左侧要响应式变化（比如小屏变 150px），改用
@media重设flex值，别动width
IE11 下 flex-grow 失效怎么办？
IE11 对 flex-grow 支持有 bug：当父容器没设 width 或 max-width，且子元素含百分比宽度时，flex-grow: 1 可能完全不计算剩余空间。这不是兼容性开关问题，而是渲染引擎缺陷。
实操建议：
- 给父容器显式设
width: 100%或max-width: 100%（哪怕它本就在块级流中） - 右侧元素改用
flex: 1 1 0（注意第三个值是0，不是auto），强制以零为基础尺寸参与分配 - 避免在 IE11 场景下给右侧设
width或min-width，这会干扰 flex 计算
有没有比 flex 更轻量的方案？
纯 CSS 实现左侧固定、右侧自适应，float + overflow: hidden 仍可用，但现代项目里它的问题比 flex 明显：清除浮动麻烦、无法垂直居中、响应式脆弱。CSS Grid 虽然更强大，但仅两列布局时写法反而啰嗦（grid-template-columns: 200px 1fr 是够用，但老项目升级成本高）。
实操建议：
- 新项目无脑用 flex，
flex: 0 0 200px+flex: 1是当前最稳解法 - 若需支持 IE9–IE10，只能退回到
float，但必须给右侧加overflow: hidden触发 BFC，并手动处理高度塌陷 - Grid 适合多维复杂布局，双栏没必要为它加额外学习和维护成本
真正容易被忽略的是：flex 容器的 min-width 默认是 auto，当内容极窄时，右侧 flex: 1 元素可能被压缩到文字换行甚至溢出——加一句 min-width: 0 到右侧元素上，就能让它乖乖收缩而不破坏布局。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
