先记住这个答案
头像固定 48px，右边标题却把整行撑出屏幕时，别急着调小 flex-shrink：它负责分配收缩量，项目的自动最小宽度还可能拦住结果。先在开发者工具里看右侧 Flex 项的实际宽度，再给这一层试 min-width: 0。盒子缩下来以后，标题是换行、省略还是横向滚动，需要另选规则，min-width: 0 本身不会处理文字。
flex-shrink只分配负空间min-width: auto可能取内容下限- 给文本所在 Flex 项设
min-width: 0 - 文字溢出还需单独处理
头像旁的长标题为什么不缩
典型场景是头像旁边放一段很长的标题。头像尺寸固定，标题区写着 flex: 1，窄屏上整行仍超过视口。此时增大 flex-shrink 的数值，标题也不会继续变窄，因为它碰到了自动最小宽度。先检查真正被撑开的 Flex 项，尤其是文本外面多包的一层容器；把 min-width: 0 写在直接参与 Flex 布局的那一层。
.row { display: flex; width: 280px; gap: 12px; }
.avatar { flex: none; width: 48px; }
.title {
flex: 1 1 auto;
min-width: 0; /* 允许这一项窄于长文本的最小内容宽度 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}把 min-width: 0 写在直接 Flex 项，示例中它解除自动最小宽度后才可能出现省略号。
自动最小宽度会卡住收缩
Flex 算法先用基准尺寸计算每项要收缩多少，再把结果限制在 min-width 与 max-width 之间。min-width: auto 在这里不是简单的零，它可能取内容提供的最小宽度，所以“收缩权重足够大”与“最终真的能变小”是两回事。min-width: 0 解除这层限制，但它不会自动处理溢出的文字；单行省略还要有 overflow: hidden、white-space: nowrap 和 text-overflow: ellipsis。
反例是标题本来就能自然换行、没有不可断的长串，此时自动最小宽度可能不会成为瓶颈，单改 min-width: 0 也不一定改变布局。判断时要先看计算后的宽度与内容断点，再看哪一层 Flex 项真正被尺寸下限夹住。
容易答错的地方
- 把
flex-shrink当作最小宽度 flex-shrink是分配负空间的比例，不是突破下限的开关。计算结果被自动最小尺寸夹住时，权重再大也没有用。- 把
min-width: 0加在文本节点上 - 应加在作为 Flex 项的元素上。如果文本位于内层，先看是哪一层 Flex 项的自动最小宽度撑开了父容器。
面试官还会怎么问？
为什么设了 overflow: hidden 也可能解决？
Flex 项的自动最小尺寸规则会考虑它是否是滚动容器，非 visible 的溢出设置在一些场景也会改变下限。不过 min-width: 0 更直接地表达“允许收缩”，裁剪应按实际展示需求单独决定。
flex: 1 为什么仍然不够？
flex: 1 设置增长、收缩和基准尺寸，最终尺寸还要经过最小尺寸约束。它不会自动取消 min-width: auto。
换成 overflow-wrap: anywhere 会怎样？
长词会允许在更多位置换行，最小内容宽度随之降低；如果产品需要完整显示文本，这比裁剪更合适。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。