min-width: 0 是为重置 flex 子项默认 min-width: auto 下限，使其可收缩；需配合 white-space: nowrap、overflow: hidden、text-overflow: ellipsis 同作用于同一块级元素才生效，且每级 flex 直接子项均需单独设置。
min-width: 0 是为了覆盖 flex 子项的默认 min-width: auto
Flex 子元素默认 min-width: auto，不是“没设值”，而是浏览器按内容最长不可折行片段（比如一串无空格 URL 或 base64）算出的最小内容宽度。这个值是 flex-shrink 的硬性下限：哪怕父容器只剩 1px，子项也宁可横向溢出或撑破布局，绝不缩得比它小。min-width: 0 的作用不是“压扁元素”，而是显式重置这个下限为 0，让收缩逻辑真正启动。
只加 min-width: 0 不会自动显示省略号
它只是打开收缩开关，后续必须和以下三者**同作用于同一个块级元素**才可能触发 text-overflow: ellipsis：
-
white-space: nowrap：必须写在目标元素上，不能靠父级继承；否则文字提前换行，“单行溢出”前提不成立 -
overflow: hidden：裁剪动作本身，但若min-width: auto还在锁宽度，子项根本没溢出，这行就白写 -
text-overflow: ellipsis：仅对display: block或display: inline-block元素生效；span等行内元素必须显式声明
嵌套 Flex 容器里容易漏掉 min-width: 0
每级 display: flex 的直接子项都受 min-width: auto 限制。例如：.card 是 flex 容器 → 里面 .info 也是 flex → 里面 .text 才是文本。这时 .info 和 .text 都要单独加 min-width: 0，不能只加在 .card 上。DevTools 中检查 computed 样式，只要某层子项的 min-width 还是 auto，就说明没生效。
flex: 1 和 flex: 1 1 0 对 min-width: 0 的配合效果不同
flex: 1 等价于 flex: 1 1 0%，其中 0% 是相对父容器宽度计算的百分比，而渲染前父宽未定，导致 flex-basis 推导异常，min-width: 0 可能无法稳定生效。推荐用 flex: 1 1 0，其中 0 是像素值，明确表示“初始宽度为 0px”，配合 min-width: 0 后，文本容器宽度才可预期。
立即学习“前端免费学习笔记（深入）”；
