根本原因是grid子项默认min-width:auto锁死收缩，必须在.grid > .item上显式设min-width:0，否则text-overflow、overflow-wrap等全部失效；且需配合flex:1 1 0、white-space:nowrap、overflow:hidden、max-width:100%五者同层作用。
Grid 容器里的 flex 子项被文字撑大，根本不是 Grid 或 Flex “失效”，而是子项默认 min-width: auto 锁死了收缩能力——必须在该子项上显式设 min-width: 0，否则所有截断、换行、text-overflow 都是摆设。
为什么 min-width: 0 必须加在 Grid 直接子元素上
Grid 项（即 .grid > .item）默认 min-width: auto，等价于 min-width: min-content。遇到无空格长串（如 URL、base64、哈希值），浏览器会先按“整词宽度”算出几百像素的最小宽度，然后强行撑开列，1fr 或 max-width 全部失效。
这个限制只作用于 Grid 的**直接子元素**，写在 Grid 容器上、或写在子项内部的嵌套 div 上都无效。DevTools 的 Computed 面板里如果看到 min-width: auto 或一个远超预期的像素值，就说明这一步漏了。
-
min-width: 0必须写在.grid > .item这一层，不能靠继承或泛选 - 如果
.item内部又用了display: flex（比如头像+文字并排），那内层 flex 容器也得单独加min-width: 0 - 旧版 Safari（≤15.6）对
min-width: 0解析不稳定，可补flex-basis: 0%兜底
text-overflow: ellipsis 在 Grid + Flex 嵌套中不生效的硬条件
这不是属性写错了，而是触发链断在第一步：Flex 子项没缩，自然没“溢出”，text-overflow 就不会画省略号。
必须同时满足以下五点，且全部写在同一目标元素（通常是 .item > p 或 .item > span）上：
-
min-width: 0（解除 Grid 子项的收缩锁） -
flex: 1 1 0（注意第三个参数是0，不是0%；避免flex: 1隐含的flex-basis: 0%计算偏差） -
white-space: nowrap（必须显式声明，不能靠父级继承） -
overflow: hidden（裁剪动作本身） -
max-width: 100%或具体值（比如max-width: 300px；若父容器宽度未定，所有逻辑归零）
长 URL / 技术字符串仍撑开？overflow-wrap 和 word-break 怎么配
overflow-wrap: break-word 只在“内容已超出可用空间”时才换行——而 min-width: auto 会让它永远等不到那个时刻。所以顺序不能错：
- 先加
min-width: 0，让子项能真正收缩 - 再设
max-width: 100%（或具体值），给换行提供参照边界 - 最后加
overflow-wrap: break-word（主逻辑，保斜杠、点等自然断点） - 兜底加
word-break: break-all（防无可断点时彻底失效，如纯 base64 字符串） - 绝对别用
word-break: break-word——已废弃，现代浏览器不保证支持
移动端需双写：word-wrap: break-word（兼容 iOS 11 及更早） + overflow-wrap: break-word（现代标准）。
父容器没设 width 或 max-width 是最常被忽略的前提
Grid 列宽是 1fr，但若整个 .grid 容器没有 width、max-width 或 inline-size 约束，它的实际宽度就是无限的——此时根本不存在“溢出”，所有 overflow、text-overflow、overflow-wrap 全部失去意义。
同样容易错位的是 overflow: hidden 的层级：它必须加在真正发生溢出的那层元素上（比如 .item > p），而不是外层 .grid 或 .item 容器。加错一层，等于没加。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
