min-width: 0是解决撑开问题的关键开关，因其覆盖flex/grid子项默认的min-width: auto（等价于min-content），使容器能收缩；必须作用于直接子项，并配合white-space: nowrap、overflow: hidden、text-overflow: ellipsis及明确宽度才生效。
为什么 min-content 会让容器撑开
min-content 不是 bug，是浏览器对内容“最小可容纳宽度”的保守计算：一串无空格的 URL、base64 字符串（比如 eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9）、哈希值或长英文单词，会被视为不可分割的整体。Flex 或 Grid 子项默认有 min-width: auto（等价于 min-width: min-content），浏览器宁可把整个容器拉宽，也不缩它——换行、省略号、overflow: hidden 全部失效，因为“溢出”根本没发生，宽度早被撑开了。
必须在 flex/grid 直接子项上设 min-width: 0
这是解锁收缩能力的开关，但只对 display: flex 或 display: grid 容器的**直接子元素**生效：
- ✅ 正确：
.container { display: flex; }+.item { min-width: 0; } - ❌ 错误：
.container { min-width: 0; }，或给.item > span加（除非该span显式设了display: block） - ⚠️ 嵌套场景要逐层加：如果
.item内部还有display: flex的头像+文字块，那文字块也得单独加min-width: 0 - 调试时务必在 DevTools 的 Computed 面板确认
min-width真实值是否已变成0px，别只看 Styles 面板里的声明行
Grid 轨道也要配合 minmax(0, 1fr)
光给子项设 min-width: 0 还不够——如果轨道本身被定义为 1fr，它的隐式下限仍是 min-content，子项再小，轨道也不会收缩。必须改写轨道定义：
- 把
grid-template-columns: 1fr 1fr;改成grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); - 对
auto-fit场景，用repeat(auto-fit, minmax(0, 1fr)))才能真正响应窄屏 - Safari ≤14.1 对
minmax(0, 1fr)支持不稳定，可降级为minmax(min-content, 1fr)+ 子项显式加min-width: 0+width: 100%
text-overflow: ellipsis 为什么还是不显示
它需要四个条件同时满足，缺一不可：
-
min-width: 0（解除子项最小宽度保护） -
white-space: nowrap（禁止换行） -
overflow: hidden（隐藏溢出部分） -
max-width或width（提供截断依据，不能是auto）
常见错误是只加了 text-overflow: ellipsis 和 overflow: hidden，却漏掉 min-width: 0 或 max-width；另外，如果子项内嵌了 flex 容器，而那个内层容器没加 min-width: 0，撑开会逐层传导，最终 ellipsis 依然不会出现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
