必须显式设置min-width: 0（水平主轴）或min-height: 0（垂直主轴），否则子元素会被浏览器默认的min-width: auto锁死最小尺寸，导致flex-shrink: 1无法收缩、overflow: hidden与text-overflow: ellipsis失效；该值须作用于flex直接子项，且需配合white-space: nowrap、overflow: hidden、text-overflow: ellipsis及明确宽度约束才完整生效。
必须显式设置 min-width: 0（水平主轴）或 min-height: 0（垂直主轴），否则子元素会被浏览器默认的 min-width: auto 锁死最小尺寸，所有收缩、溢出控制都失效。
为什么 flex-shrink: 1 不起作用？
不是属性写错了，而是浏览器给每个 flex 子项悄悄加了 min-width: auto（主轴为 row 时）——它取内容中最长不可折行片段（比如无空格 URL、连续英文、图片固有宽）作为“不可再小”的底线。哪怕你写了 flex: 1 或 flex-shrink: 1，收缩也会卡在这条隐形底线前，根本压不下去。
常见错误现象：
- 文字被挤出容器、换行异常
-
overflow: hidden+text-overflow: ellipsis完全不显示省略号 -
max-width: 100%对<img>失效，图片仍撑破父容器
哪些元素必须加 min-width: 0？
只要该子元素需要参与 flex 收缩、或承载可能溢出的内容，且是 flex 容器的**直接子项**，就应加：
- 包裹文本的
<span></span>、<p></p>、<div> <li> <code><img>、<iframe></iframe>、<button></button>等替换元素（它们默认min-width: auto更顽固） - 任何设置了
flex: 1、flex-grow: 1或flex-shrink: 1却没如预期收缩的项 - 父容器设了
flex-wrap: wrap：这不是收缩，是换行，视觉上像“被压”，实则未触发收缩逻辑 - 子元素本身有
width且内容极窄（如纯图标），flex-basis: auto可能算出 0，导致实际宽度归零 → 改用flex: 0 0 auto或显式flex-basis: fit-content - 盒模型干扰：
box-sizing: content-box（默认）下，padding和border会额外加在flex-basis之外 → 全局确保* { box-sizing: border-box; }已生效 -
white-space: nowrap：强制不换行，否则没机会“溢出” -
overflow: hidden：隐藏超出部分 -
text-overflow: ellipsis：仅当以上两个条件满足时才渲染省略号
注意：min-width: 0 必须写在直接子元素上，不能只加在父容器或中间 wrapper 上；也不要用 min-width: 0px 或 min-width: 0%，部分旧版 Safari/Firefox 会忽略，只认 min-width: 0（无单位）。
加了 min-width: 0 还是不收缩？检查这三个点
min-width: 0 是解锁收缩的「开关」，但不是万能解药。以下情况会让它失效：
配合 min-width: 0 实现单行省略的完整写法
min-width: 0 只是前提，要让文字真正截断并显示省略号，还必须在同一元素上同时声明：
示例：
.text-item {
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
漏掉任意一项，效果都会中断。DevTools 中务必检查 computed 样式里 min-width 是否真为 0px，而不是被其他规则（如 min-width: fit-content）覆盖。
最常被忽略的是：这个限制只存在于 flex 直接子项，且只对主轴方向生效；一旦嵌套多层、或主轴方向切换（比如 flex-direction: column），就得改用 min-height: 0，逻辑完全对称，但单位和方向不能错。
