1fr 默认等价于 minmax(min-content, 1fr)，min-content 强制拉宽轨道导致溢出；需同时设置 grid-template-columns 为 minmax(0, 1fr) 并给直接子项设 min-width: 0。
1fr 本身不会撑开容器，但默认等价于 minmax(min-content, 1fr)，而 min-content 会强制拉宽轨道——这才是溢出的真正源头。
为什么 1fr 实际上等于 minmax(min-content, 1fr)
浏览器对 1fr 的解析不是“等分可用空间”那么简单。规范里它隐式带下限：min-content，即内容天然最小宽度（比如一个无空格的 URL、JSON 字段、未设 max-width 的图片）。只要这个值大于按比例分得的空间，整列就被顶宽，其他列被迫压缩甚至归零。
- 你在 DevTools 的 Computed 面板里看到子项的
min-width是auto，基本就是它在作祟 -
white-space: nowrap不是原因，只是让min-content更容易暴露 - 只给 Grid 容器加
overflow: hidden没用——内容根本没“溢出”，而是容器被轨道被动撑大了
必须同时改的两处：轨道定义 + 直接子项样式
漏掉任意一环，撑开问题照旧：
- 把
grid-template-columns: 1fr 2fr改成grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) - 给网格容器的**直接子元素**（如
.grid > *）加min-width: 0（水平方向）或min-height: 0（垂直方向） - 如果子项内部还有
display: grid或display: flex，它的直接子元素也得加min-width: 0，否则撑出会逐层传导
图片、<pre class="brush:php;toolbar:false;"></pre>、<table> 这类“硬茬怎么处理
<p>它们有固有尺寸，仅靠 <code>min-width: 0 不够：
立即学习“前端免费学习笔记（深入）”；
- 图片必须加在**父网格项**上：
width: 100%; height: auto（保比例）或width: 100%; height: 100%; object-fit: cover（填满） -
<pre class="brush:php;toolbar:false;"></pre>和长文本需配overflow-wrap: break-word或word-break: break-all，且依赖前面的min-width: 0 <table> 要加 <code>table-layout: fixed+width: 100%，否则列宽由内容决定，Grid 失控- Safari 14.1 及更早版本对
minmax(0, 1fr)解析不稳定，建议用@supports (grid-template-columns: minmax(0, 1fr)))做特性检测 - 解决关键不是禁用
fr，而是打断隐式增长链：给承载嵌套 Grid 的容器加max-height，或改用minmax(0, 1fr) - 比嵌套 Grid 更稳的方案是外层用 Flex（
flex: 1天然适配动态高度），内层 Grid 只负责局部二维布局 - 调试时重点看 Chrome Layout 面板里的
Computed → height是否为auto，再点开 Grid 面板查 row track 尺寸是否远超预期
嵌套 Grid 中 fr 失控的根源是高度循环放大
外层 Grid 若无显式高度约束（如 height 或 max-height），其高度会被子内容撑开；子 Grid 的 1fr 又按这个被撑大的高度计算，形成死循环。
真正难的不是写对一行 minmax(0, 1fr)，而是在多层嵌套中判断“该在哪一层加 min-width: 0”——是 Grid 容器？某条 grid-template-rows？还是某个 grid-area 的直接子元素？漏掉一层，溢出就还在那儿。
