min-width: 0本身不是bug，而是需逐层加在嵌套flex的每一级直接子项（如.grid-cell、.grid-cell > .content、.content > span），并配齐white-space: nowrap、overflow: hidden、text-overflow: ellipsis及display: block，且父容器须有明确宽度约束。
直接说结论：min-width: 0 本身不是 Bug，而是你加错了位置、漏了配套规则，或误以为它能单独起效。它在嵌套 Flex 中“失效”，95% 是因为没逐层加、没配齐四件套、或父容器缺宽度约束。
为什么嵌套 Flex 里加了 min-width: 0 还是溢出
根本原因不是 min-width: 0 失效，而是它只对「Flex 直接子项」生效，且无法穿透嵌套层级。比如：
-
.card是外层 Flex 容器 → 给它加min-width: 0只影响它自己在 Grid/父容器中的压缩，不影响内部 -
.card > .info是内层 Flex 容器 → 它的子项（如.info > .title）仍受默认min-width: auto锁定 -
.title里还有span包文本 → 若没给span加min-width: 0，浏览器仍按最长 URL 算最小宽
DevTools 里检查 computed min-width，只要还显示 auto，就说明某一层没加到位。
必须逐层加 min-width: 0 的三个关键节点
嵌套越深，漏掉一层就越容易翻车。重点关注以下三类元素，都得显式写 min-width: 0：
- 作为 Grid Item 或绝对定位容器的最外层 Flex 容器（例如
.grid-cell { display: flex; min-width: 0; }） - 该 Flex 容器的直接子项中，需要弹性伸缩或文本截断的元素（例如
.grid-cell > .content { flex: 1; min-width: 0; }） - 最终承载文本/图片的叶子节点（例如
.content > span、.content > img），尤其是span这类行内元素
别指望父级样式继承 —— min-width: 0 不会从 .content “传染”到 span；也别写成 min-width: 0px，旧版 Safari 会忽略。
min-width: 0 单独存在毫无意义，必须配齐四件套
min-width: 0 只是打开收缩开关，不配齐其余三项，text-overflow: ellipsis 永远不会出现：
-
white-space: nowrap：必须写在目标元素上（如span），不能靠父级继承；否则文字提前换行，压根不触发单行溢出 -
overflow: hidden：裁剪动作本身，但若min-width: auto还在，容器被撑大，这行 CSS 就等于没执行 -
text-overflow: ellipsis：仅对块级元素生效，span必须同步加display: block或display: inline-block
另外，该元素必须有明确宽度上下文：来自父容器的 max-width、width，或自身设 flex-basis（推荐 flex: 1 1 0 而非 flex: 1）。
容易被忽略的兼容性与渲染干扰点
即使代码全对，这些细节也会让效果消失：
- 旧版 Safari（≤14.1）对
min-width: 0+white-space: nowrap组合支持不稳定，可临时改用flex-shrink: 0+overflow: hidden强制截断 -
img或input这类替换元素，光加min-width: 0不够，必须同步加max-width: 100%和height: auto - 父容器用了
width: 100vw+padding，实际宽度必超视口，应改用width: 100%并确保其父级有明确 content width - 第三方 UI 库（如 Ant Design）可能重置了
box-sizing或覆盖了min-width，务必在 DevTools 的 Computed 面板确认最终值
真正麻烦的从来不是写多少行 CSS，而是哪一层该加、哪一行不能少、哪个浏览器会悄悄绕过你的规则 —— 这些地方一漏，整个截断链就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
