Flex子元素宽度自适应失败的核心原因是未理解flex-grow作用于剩余空间而非直接设宽，需确保父容器启用flex布局、明确主轴方向、有可计算宽度，并检查flex-basis是否合理、min-width等干扰项。
Flex子元素宽度自适应失败，核心原因往往不是“没写width”，而是没理解flex-grow在弹性布局中的真实作用——它不直接设宽度，而是在flex-basis确定初始尺寸后，按权重分配剩余空间。
先确认父容器已启用flex布局
如果父元素没加display: flex，所有flex相关属性（包括flex-grow）都无效。必须确保：
- 父容器设置了
display: flex或display: inline-flex - 主轴方向明确（如
flex-direction: row，默认就是row） - 父容器自身有可计算的宽度（比如设置了
width、max-width，或处于正常文档流中）
flex-grow本身不生效？检查flex-basis是否被覆盖
flex-grow只对“剩余空间”起作用。如果子元素的flex-basis过大（比如设了flex-basis: 100%），可能已经占满容器，自然没有剩余空间可分。
- 想让两个子项按2:1比例分配整行宽度：用
flex: 2和flex: 1，同时确保flex-basis: 0%（等价于flex: 2 1 0%） - 若其中一项已有内容撑开（如文字很长），又没设
flex-basis，它会按auto计算初始宽，导致比例失真 - 调试时可在开发者工具中查看computed样式里的
flex-basis值，确认是否为预期结果
固定宽+自适应宽并存时的正确写法
常见需求：左侧菜单固定200px，右侧内容区自动填满剩余空间。错误做法是给右侧加width: 100%，正确方式靠flex-grow与flex-basis配合：
立即学习“前端免费学习笔记（深入）”；
- 固定项：
flex: 0 0 200px（不伸缩、不收缩、基准宽200px） - 自适应项：
flex: 1（等价于flex: 1 1 0%，从0开始均分剩余空间） - 避免给自适应项再设
width，否则可能触发min-width限制，造成换行或溢出
为什么flex-grow设了还是没变化？排查这几个点
即使写了flex-grow: 1，也可能看起来“没反应”，常见干扰项：
- 子元素设置了
min-width（比如min-width: 300px），强行卡住最小尺寸，挤占了flex-grow的扩展空间 -
flex-shrink: 0被误加，虽不影响扩展，但若空间不足时其他项收缩，它会显得“异常宽” - 父容器用了
float、position: absolute或未定义宽度，导致flex容器自身宽度坍缩 - 子元素是
table、img等固有尺寸元素，需额外加width: 100%或max-width: 100%配合
