CSS Grid中1fr列被长文本撑开，根本原因是子项默认min-width:auto（即min-content），需在轨道定义中使用minmax(0,1fr)并为网格直接子项设置min-width:0，同时满足white-space:nowrap、overflow:hidden及width/max-width才能使text-overflow:ellipsis生效。
不是列宽“超出”，而是浏览器按内容最小宽度（min-content）撑开了轨道——1fr 本身不设收缩下限，遇到长单词、URL 或未约束图片时，整列会被强制拉宽，其他列被压缩甚至消失。
为什么 1fr 会让列看起来“超宽”
浏览器把 1fr 理解为“等分剩余空间”，但它不干预子项的 min-width: auto 行为。只要某个网格子项的内容自然宽度（比如一个无空格的 https://example.com/very/long/path）大于分配到的轨道宽度，该轨道就会被撑到 min-content 宽度，导致视觉上“一列极宽、其余挤成一条线”。
-
grid-template-columns: 1fr 1fr在 DevTools 里显示没变，但 Computed 宽度可能分别是842px和12px - 这不是 bug，是 CSS Grid 规范定义的行为：轨道尺寸由子项的
min-content和max-content共同决定 -
overflow: hidden加在容器上无效，因为溢出发生在布局计算阶段，不是渲染裁剪阶段
minmax(0, 1fr) 必须加在哪一层
只改 grid-template-columns 不够，必须配合子项的尺寸约束，否则撑开行为会逐层传导。
- 在轨道定义中替换：
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) - 在网格直接子元素上加：
min-width: 0（水平方向）或min-height: 0（垂直方向） - 如果子项内部用了
display: flex，它的直接子元素也得加min-width: 0 - 对图片或内联块级元素，额外加
max-width: 100%和height: auto
容器没高度/宽度限制，overflow 就是摆设
给 Grid 容器加了 overflow: auto 却没滚动条？大概率是因为它没有明确的尺寸边界。
立即学习“前端免费学习笔记（深入）”；
-
height: 300px或max-height: 300px才能触发滚动（推荐后者，更适应响应式） - 若容器在
flex或绝对定位上下文中，边界常不明确，此时max-height+minmax(0, 1fr)是双保险 -
width或max-width同样关键——text-overflow: ellipsis需要截断基准，不能依赖100%
text-overflow: ellipsis 不生效的真正原因
它需要四个条件同时满足，漏掉任意一个都会失效：
-
min-width: 0（解除网格子项默认的min-width: auto保护） -
white-space: nowrap（禁止换行） -
overflow: hidden（裁剪溢出部分） -
width或max-width（提供截断的物理边界；100%在跨列或嵌套时不可靠）
最常被忽略的是第一项：没加 min-width: 0，ellipsis 就永远不出现，哪怕其他三项全对。
