min-width: 0是Grid子项尺寸计算的“解锁开关”，必须作用于直接子元素，覆盖默认min-width: auto（≈min-content），配合minmax(0, 1fr)轨道定义和white-space/overflow/text-overflow等样式才能实现收缩与截断。
min-width: 0 是 Grid 子项尺寸计算的“解锁开关”
不加 min-width: 0，Grid 子项就默认按 min-width: auto（≈内容最小宽度）参与布局计算，浏览器宁可拉宽轨道也不压缩内容。你写的 grid-template-columns: 1fr 1fr 看似等分，实际可能一列宽得离谱、一列窄到看不见——这不是 1fr 失效，是子项锁死了最小宽度。
它不是最终宽度值，而是重置起点：只有设成 0，1fr 才真正开始按比例分配剩余空间，text-overflow: ellipsis 才有机会触发，overflow-wrap: break-word 才能生效。
只给容器设 min-width: 0 完全无效
min-width: 0 必须作用于 Grid 的**直接子元素**（即 .grid-item），写在 .grid-container 上毫无意义。常见错误包括：
- 在 Vue
<style scoped>中漏掉:deep(.grid-item)，样式未穿透 - React 中用
styled-components包裹了组件，但样式只落在 wrapper 上，没落到真实 DOM 节点 - 用了 Ant Design 的
Card或其他 UI 组件，它们内部没设min-width: 0，必须手动覆盖
搭配 grid-template-columns: minmax(0, 1fr) 更可靠
光靠子项设 min-width: 0 还不够彻底——如果轨道定义本身拒绝收缩，比如 1fr 实际等价于 minmax(auto, 1fr)，长内容仍会撑开。
立即学习“前端免费学习笔记（深入）”；
更底层的修复是在容器上改轨道定义：
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)- 配合
repeat(auto-fit, minmax(0, 1fr))做响应式列数 - Safari 14.1 及更早版本对
minmax(0, 1fr)支持不稳定，可用@supports (grid-template-columns: minmax(0, 1fr))做特性检测降级
嵌套 Flex/Grid 时容易漏掉内层 min-width: 0
如果 Grid 子项内部又用了 display: flex 或 display: grid，那它的**直接子元素**也得加 min-width: 0。否则撑开会逐层传导，外层加了也白加。
典型场景：
- Grid 子项里放一个横向排列的
flex头像+昵称+按钮组 - 昵称用了
white-space: nowrap，但没加min-width: 0→ 按钮被挤出视口 - Grid 子项是
position: absolute的气泡框，同时写了left和right→ 不加min-width: 0一样撑不开
最易被忽略的是：你以为改了 CSS 就生效，但 DevTools 的 Computed 面板里 min-width 仍是 auto——可能是被更高优先级规则覆盖，或框架作用域没穿透，或缓存没刷新。
