直接加overflow:hidden大概率无效，因Grid子项默认min-width:auto锁定最小宽度，必须同时满足容器有明确宽高、轨道用minmax(0,1fr)、子项设min-width:0三者，再配overflow:hidden才真正生效。
直接加 overflow: hidden 大概率没用——Grid 子元素溢出不是“内容多”，而是轨道没被正确约束、子项没被主动压制，三者缺一不可。
为什么 grid 容器设了 overflow 还是不生效
因为 Grid 容器默认不会限制子项尺寸，overflow 只裁剪「容器的内容框」，但子项会优先撑开轨道甚至整个容器。除非你同时满足：
- 容器有明确宽高（如
max-width: 600px或height: 400px），否则它会无限伸展，overflow形同虚设 - 子项所在轨道本身可收缩（比如用了
minmax(0, 1fr)，而非纯1fr） - 子项自身设了
min-width: 0（默认min-width: auto会锁死最小宽度，轨道再弹性也缩不动）
minmax(0, 1fr) 是必须写的，不是可选优化
写 1fr 只表示“分剩余空间”，但不承诺能缩到多小；浏览器仍按内容的 min-content 给轨道分配最小宽度。长 URL、JSON 字段、无空格英文串会直接把整列撑爆。
必须显式声明：grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)
立即学习“前端免费学习笔记（深入）”；
- Safari 14.1 及更早版本对
0解析异常，可用@supports (grid-template-columns: minmax(0, 1fr))做降级 - 搭配
repeat(auto-fit, ...)更安全，auto-fill会保留空轨道导致列宽失衡 - 别混用
minmax(0, 1fr) auto——auto列会抢走最小宽度，破坏比例
子项上漏掉 min-width: 0 就前功尽弃
minmax(0, 1fr) 开了门，但子项默认站在门口不动（min-width: auto）。必须手动让它进门：
- 直接写：
.grid > .item { min-width: 0; }（注意选择器层级，避免污染非 Grid 场景） - 嵌套 Flex/Grid 的子项也要加：
.item > .inner { min-width: 0; } - 图片、
<pre>、<table>等固有尺寸元素最容易漏，需单独加固 - 此时再配
overflow: hidden才真正开始裁剪，而不是等它先撑破容器
文字和媒体内容要单独处理，不能只靠轨道
轨道收缩 + min-width: 0 解决了“容器能不能缩”的问题，但“内容怎么显示”还得另配：
- 长无空格文本（URL、base64）：
word-break: break-all或overflow-wrap: break-word（后者更温和） - 单行标题截断：
white-space: nowrap; overflow: hidden; text-overflow: ellipsis（三者缺一不可） - 图片强制响应：
img { max-width: 100%; height: auto; display: block; } - 多行文本截断（现代浏览器）：
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical
最常翻车的是嵌套结构里只改了外层 Grid 轨道，却忘了内层 Flex 容器的子项也要加 min-width: 0 —— 撑开会逐层传导，最后发现溢出点根本不在你以为的位置。
