min-width: 0是解除Grid子项默认min-width: auto锁定的关键，使overflow: hidden和text-overflow: ellipsis得以生效；必须作用于网格直接子元素，并与white-space: nowrap、overflow: hidden、text-overflow: ellipsis及块级显示同层配合。
因为 min-width: 0 不是“让内容变小”，而是解除浏览器对 Grid 子项的默认宽度锁定，使后续的 overflow: hidden 和 text-overflow: ellipsis 有机会真正执行。
Grid 子项默认 min-width: auto 是溢出根源
Grid 直接子元素（比如 .grid > .item）默认有 min-width: auto，它等价于 min-content：浏览器会先算出“这段文字/这张图本身最窄能缩到多宽”，然后死守这个值不放。哪怕父容器只有 100px 宽，一个无空格 URL 也能把整列撑到 800px——此时 overflow: hidden 根本不触发，因为内容根本没“溢出”，只是容器被顶大了。
- DevTools 的 Computed 面板里查
min-width，只要还显示auto，就说明这层没加到位 -
min-width: 0必须写在网格直接子元素上，写在.grid容器上完全无效 - 它不继承，
.item加了min-width: 0，里面的.item > span还得单独加
只加 min-width: 0 为什么还是溢出
min-width: 0 只是“松开刹车”，不是“踩油门”。它让收缩成为可能，但裁剪和省略必须靠另外三个样式配合，且必须作用于同一元素：
-
white-space: nowrap：必须写在这层，不能靠父级继承；否则文字提前换行，“单行溢出”前提不成立 -
overflow: hidden：裁剪动作本身，但若min-width: auto还在，容器根本没溢出，这行 CSS 就等于没执行 -
text-overflow: ellipsis：只对块级元素生效，span类行内元素必须同步加display: block或display: inline-block
嵌套 Flex/Grid 时 min-width: 0 加在哪一层
它只对「Flex 或 Grid 的直接子项」生效，无法穿透层级。如果 .item 是 Grid 子项，内部又用了 display: flex，那么：
立即学习“前端免费学习笔记（深入）”；
-
.item自身要加min-width: 0 -
.item > .content（flex 容器）也要加min-width: 0 -
.content > span（最终文本节点）同样要加min-width: 0，并配齐white-space、overflow、text-overflow - 漏掉任意一层，撑开就会传导上去，外层加了也白加
Safari 和旧版浏览器的兼容性陷阱
在 Safari（尤其是 iOS 15 及更早）中，min-width: 0 常被忽略或延迟生效，尤其嵌套了 inline 元素或 display: flex 时：
- 显式加
!important：如.item { min-width: 0 !important; } - 避免用
min-width: 0px或min-width: 0%，只有无单位的0是标准写法 - 搭配
grid-template-columns: minmax(0, 1fr)更底层可靠，但注意 Safari 14.1 及更早对0解析异常，可用@supports检测
真正容易被忽略的，不是该不该加 min-width: 0，而是它必须和宽度约束（来自 grid-template-columns 或 max-width）、块级上下文、以及文本处理三件套同时落在同一个真实 DOM 节点上——少一个，就卡在半路。
