flex-shrink设了不生效是因为未触发收缩条件：容器总需求宽度大于可用空间且子项有可缩基准。常见原因包括flex-basis过小、内容固有尺寸小于flex-basis、父容器未溢出；解决需显式设flex-basis、加min-width:0、避免nowrap长文本等。
Flex 子元素设了 flex-shrink: 1 却不缩小，根本不是属性没生效，而是它压根没触发收缩条件——浏览器只在「容器总需求宽度 > 可用空间」时才启动 flex-shrink 计算，且前提是子项有“可缩的基准”。
flex-shrink 为什么设了也纹丝不动
常见现象是写了 flex-shrink: 2，但元素尺寸完全不变。原因通常有三：
-
flex-basis太小或为auto：比如flex: 1 2 auto，若内容本身只有 50px 宽，而父容器宽 300px，那根本没有“多余空间要挤”，flex-shrink就不会介入 - 子项内容固有尺寸（intrinsic size）小于
flex-basis：图片没设width、文本没换行、<input>带默认min-width: auto，都会让浏览器认为“它已经够小了”，缩无可缩 - 父容器未溢出：用 DevTools 检查父容器 computed width 和子项总
flex-basis和，若后者 ≤ 前者，flex-shrink根本不参与布局计算
怎么让 flex-shrink 真正起作用
让它动起来，关键不是调数字，而是先创造“可缩的前提”：
- 显式设
flex-basis：比如flex: 0 2 200px，明确告诉浏览器“我初始想占 200px，超了就按权重 2 缩” - 解除内容最小宽度枷锁：对含文本、
<input>、<img>的子项，必须加min-width: 0（水平布局）或min-height: 0（垂直布局） - 避免
white-space: nowrap+ 长文本组合：这会让内容固有宽度暴涨，flex-shrink再大也缩不到比文字还窄 - 慎用
flex: 1：它等价于flex: 1 1 0%，flex-basis: 0%在某些场景下反而导致基准不可预测，改用flex: 1 1 auto更稳
flex-shrink: 0 不等于“尺寸锁定”，只是关掉弹性通道
设了 flex-shrink: 0 后元素仍被压扁、换行、图片缩放？问题不在 flex-shrink，而在它没管的另一层限制：
-
min-width: auto还在起效：浏览器仍会按内容长度强制换行，必须配min-width: 0 - 表单控件（
<input>、<select></select>）自带 UA 默认min-width（Chrome 是 ~13ch），flex-shrink: 0对它无效，必须单独重置 - 图片默认是替换元素，
flex-shrink不影响其 intrinsic size，需配合width或max-width控制 - 如果父容器
overflow: hidden且子项实际宽度已超限，flex-shrink: 0会导致裁切，而非拒绝渲染
真正可控的写法永远是组合：比如固定按钮用 flex: 0 0 30px + min-width: 0；自适应文本区用 flex: 1 1 auto + min-width: 0 + white-space: nowrap。别只盯着 flex-shrink 数字，先确认它有没有“入场资格”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
