先记住这个答案
min-width: 0 能让横向 Flex 项低于默认内容下限，却不会改变里面图片或长单词的绘制方式。比如标题盒从 500px 缩到 200px，文字仍可能画到盒子外。先确认 flex-shrink 没被设为零，再放开最小宽度，最后按产品需求给文本加换行、省略或给内容加独立滚动。把这三层问题分开看更容易定位。
min-width: 0放开盒子下限- 它不自动裁剪内容
- 单行省略要满足三个条件
- 完整文本可断行或内部滚动
标题盒缩窄后仍越界
搜索结果行左边是缩略图，右边是长标题。把标题项设为 flex: 1; min-width: 0 后，行终于不会把页面撑宽，但标题的一长串路径仍可穿出盒子。这不是 min-width: 0 失效，而是它只改变盒子可收缩的下限。要单行省略，再给显示标题的元素加 overflow: hidden、text-overflow: ellipsis 和 white-space: nowrap。
.result { display: flex; gap: 12px; }
.thumb { flex: none; width: 64px; }
.result__text { flex: 1 1 auto; min-width: 0; }
.result__title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; /* 内容如何显示要单独指定 */
}外层文本项允许缩小，真正显示标题的内层元素负责省略。
盒子宽度和内容绘制分开处理
Flex 项的最终主轴尺寸是弹性分配和最小最大尺寸限制共同计算的结果。min-width: 0 只松开最后的宽度下限，不会改变默认的 overflow: visible。因此盒子可能已经缩窄，但绘制出来的内容仍越过边界。若想保留完整信息，可以用 overflow-wrap: anywhere 让长串断开；代码块等不宜断行的内容则适合在内层横向滚动。
省略号案例还能暴露盒子与文字的区别。让头像宽度固定，把标题外层设 flex: 1; min-width: 0，标题盒子便可拿到剩余宽度；仅此一步不会出现省略号。要在标题自身加 white-space: nowrap、overflow: hidden 和 text-overflow: ellipsis。如果设计希望长标题可以换成两行，应采用断行或多行截断方案，不要为了通过单行示例而把内容全部藏掉。
容易答错的地方
- 以为设零就自动出现省略号
- 省略号由
text-overflow等条件决定，min-width: 0只是让外层具备变窄的可能。 - 给固定缩略图也设
min-width: 0 - 问题通常在弹性的文本项。固定图片应按需求保留尺寸，避免被挤扁。
面试官还会怎么问？
width: 0 和 min-width: 0 一样吗？
不一样。前者提供宽度值，会影响基准尺寸等计算；后者仅改变最小宽度约束。
多层 Flex 嵌套要改哪层？
从被撑开的那层往内检查，任何作为 Flex 项且有自动最小宽度的中间层都可能卡住收缩。
想保留全部文本怎样做？
允许换行，例如适当使用 overflow-wrap: anywhere；或者给内层设滚动，具体取决于内容可读性。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。