flex-grow设为0仍被拉伸，主因是flex-basis为auto且内容有宽度，或min-width:auto限制；应设flex-shrink:0和flex-basis:0，或用flex:0 0 auto。
flex-grow 为什么设为 0 却还是被拉伸了？
默认情况下，flex-grow 是 0，但项目仍可能“看起来被拉伸”，常见原因是：flex-basis 设为 auto（默认值）且内容有宽度，或父容器设置了 min-width: auto（Flex 项默认有最小尺寸限制）。真正想禁用拉伸，得同时设 flex-shrink: 0 和 flex-basis: 0，或者直接写 flex: 0 0 auto。
按比例拉伸时，flex-grow 的数值是相对谁计算的？
flex-grow 的数值本身不带单位，它只表示“剩余空间分配权重”，不是百分比。比如三个子项分别设 flex-grow: 1、2、1，剩余空间会被分成 4 份：第一个拿 1 份，第二个拿 2 份，第三个拿 1 份。关键点在于：
- 计算起点是：父容器总宽 − 所有子项的
flex-basis（或width）之和 - 如果某子项
flex-basis为auto，则以内容自然宽度为基准，这会导致比例“失真” - 建议统一设
flex-basis: 0，让flex-grow完全主导分配，例如：flex: 1 1 0
flex-grow 拉伸后内容溢出或换行异常怎么办？
拉伸本身不会触发换行，但若子项内文本无断行控制，或设置了 white-space: nowrap，就容易溢出容器。常见修复方式：
- 给拉伸项加
min-width: 0（解决因min-width: auto导致的 flex 项不收缩/不响应拉伸） - 对内部文字加
overflow: hidden; text-overflow: ellipsis; white-space: nowrap（单行截断） - 需要自动换行时，确保没设
white-space: nowrap，并考虑加word-break: break-word - 慎用
width和flex-grow混用——width会覆盖flex-basis，干扰比例计算
在 Safari 或旧版 Chrome 中 flex-grow 表现不一致？
老版本 Safari（≤12）对 flex-basis: 0 解析有 bug，可能忽略该值导致拉伸失效；某些 Android WebView 对 flex: 1 简写支持也不稳定。稳妥做法：
- 显式写出三值：
flex: 1 1 0（而非简写为flex: 1） - 对需兼容的场景，加前缀（虽现代已基本不用）：
-webkit-flex: 1 1 0 - 测试时重点关注
flex-basis是否被正确解析——可在 DevTools 中查看 computed 样式里的flex-basis值是否为0px
flex-basis 和 min-width 的隐式交互上，而不是 flex-grow 本身。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
