flex-grow 右侧不撑满的主因是父容器未设 display: flex，且左侧固定宽元素缺少 flex-shrink: 0；flex-grow 仅分配剩余空间，需确保祖先容器宽度明确，尤其 IE11 中更需避免 flex-basis: auto。
flex-grow 为什么右边不撑满？
常见错误是只给右侧元素设 flex-grow: 1，但忘了父容器必须是 display: flex，且左侧元素没处理收缩行为。Flex 默认会尝试压缩子项宽度来适应容器，左侧固定宽若没明确设 flex-shrink: 0，在窄屏下可能被压扁。
- 父容器必须声明
display: flex，否则flex-grow完全无效 - 左侧固定宽元素要加
flex-shrink: 0，否则它可能被压缩（尤其内容少时） -
flex-grow只对“剩余空间”起作用——它不抢左侧的宽度，但也不保证右侧一定占满，前提是父容器有足够宽度
左侧固定宽度的三种写法区别
固定左侧宽度有 width、flex-basis、min-width 三种常用方式，效果不同：
-
width: 200px+flex-shrink: 0：最直观，但脱离 Flex 流程控制，响应式时难调整 -
flex: 0 0 200px（等价于flex-grow: 0; flex-shrink: 0; flex-basis: 200px）：推荐，语义清晰，完全在 Flex 框架内控制 -
flex-basis: 200px单独写：不够，必须配flex-shrink: 0，否则仍可能被压缩
示例结构：
.container { display: flex; }
.sidebar { flex: 0 0 200px; }
.main { flex-grow: 1; }
flex-grow: 1 和 flex: 1 的坑
很多人直接写 flex: 1 给右侧，以为等于 flex-grow: 1，其实不是：flex: 1 展开是 flex: 1 1 0%，其中 flex-basis: 0% 会导致它从零开始分配空间，常让内容文字挤成一团（尤其含内联元素时）。
立即学习“前端免费学习笔记（深入）”；
- 想让右侧“尽可能撑开并保留自身内容宽度”，用
flex-grow: 1+ 显式设flex-basis: auto - 或更稳妥：写
flex: 1 1 auto，避免0%带来的意外压缩 - 如果右侧有最小宽度需求（比如不能窄于 300px），记得加
min-width: 300px，flex-grow不会尊重这个约束，除非你手动加
IE11 兼容性问题怎么绕？
IE11 对 flex-grow 支持有 bug：当父容器无明确宽度（比如 width: 100% 但祖先没设宽），右侧可能不显示。这不是写法错，是渲染引擎缺陷。
- 确保父容器（及所有上层块级祖先）都有明确宽度，如
width: 100%或max-width - 避免在 IE11 中依赖
flex-basis: auto，改用具体值（如flex-basis: 300px）更稳 - 如果必须支持 IE11 且布局复杂，不如退回到
float+margin-left方案，反而更可控
真正麻烦的不是语法写不对，而是 flex 容器的尺寸来源链断裂——一个没设宽的祖先，就能让整个 flex-grow 失效，这点很容易被忽略。
