Flex 子项默认 min-width:auto 导致 overflow 失效，因其强制子项不小于内容宽度；解决方法是显式设置 min-width:0，配合 flex 收缩属性、overflow:hidden 及 text-overflow:ellipsis 等生效。
在 CSS Flex 布局中，子项内容过长导致溢出（如文字、图片、长链接）时，即使父容器设置了 overflow: hidden，子项仍可能撑开容器、不触发截断——这通常是因为 Flex 子项默认有 min-width: auto（即“最小宽度不小于内容宽度”），它会阻止收缩，使 overflow 失效。
为什么 overflow 会失效？
Flex 子项默认的 min-width: auto 是 浏览器 为防止内容被意外压缩而设的保护机制。当子项内含不可折行文本（如长 URL）、内联块元素或未设宽的图片时，该最小宽度会强制子项至少容纳全部内容，从而绕过父容器的 overflow 控制。
核心解法：设置 min-width: 0
只需给需要响应 overflow 的子项显式设置：
min-width: 0;
这样就解除了 Flex 的默认最小宽度限制，让子项能真正收缩到父容器指定的尺寸内，此时 overflow: hidden（或 text-overflow: ellipsis 等）才能生效。
立即学习 “ 前端免费学习笔记（深入）”；
常用配合写法（推荐组合）
- flex: 1; 或 flex: 0 1 auto;（允许收缩）
- min-width: 0;（关键！解除收缩阻塞）
- overflow: hidden;（隐藏溢出）
- text-overflow: ellipsis;（单行省略，需同时加 white-space: nowrap;）
注意边界情况
某些场景下仅设 min-width: 0 还不够，需额外处理：
- 若子项含图片，建议加上 max-width: 100%; 防止图片撑破
- 若子项是嵌套 Flex 容器，其内部子项也可能需要同样设置
min-width: 0 - 使用 display: flex; 的子项本身若未设宽，也需加
min-width: 0才能响应外层 overflow
