百分比行高导致溢出是因为30%+70%按容器content box高度计算，而gap不计入该高度却额外占空间，总高度超100%；fr单位则先扣除gap再分配剩余空间，天然避免溢出。
grid-template-rows: 30% 70% 为什么总多出滚动条
因为百分比行高是按容器的 content box 高度计算的，而 gap 不参与这个计算——但它真实占空间。30% + 70% = 100%，再加 gap: 12px，总高度就变成 100% + 12px，必然溢出。
这不是浏览器 bug，是 CSS 盒模型的既定行为：百分比值只看 height，不预留 gap、border、padding 的位置。
Firefox、Edge 和 Linux 系统下尤其明显，因为它们对 gap 渲染更严格，不会“悄悄压缩”来凑合。
fr 单位为什么能彻底避开这个问题
fr 是 Grid 原生单位，它分配的是「扣除所有 gap 后的剩余空间」，不是容器 height 的百分比。
比如 grid-template-rows: 3fr 7fr，浏览器先从 height: 100vh 里减掉所有 gap 总和，再把剩下的空间按 3:7 切分——gap 被天然排除在计算之外。
你不需要：
- 手动写 calc(100vh - 12px)
- 混用 % 和 fr
- 给子项加 height: 100% 来“补高”
为什么改了 fr 还是溢出？关键漏掉了这一步
fr 分的是“剩余空间”，但若网格容器本身没有确定高度，它就剩不下任何空间——fr 会分到 0。
常见失效链：
- 父级是 height: auto
- 或 html, body 没设 height: 100%
- 或容器被 Flex/Grid 父级以 align-items: stretch 拉伸，但父级没高度
必须确保高度链闭合：
- html, body { height: 100%; margin: 0; }
- 网格容器有显式 height（如 100vh）或 min-height
- 不依赖子项撑高，也不靠 height: 100% 向上继承（它在 Grid 子项上基本无效）
文本/图片内容撑开单元格导致溢出怎么办
即使行高用对了 fr，长 URL、无空格英文、未约束的 <img> 仍会让单个单元格横向或纵向撑开整行。
关键两步缺一不可：
- 轨道层：用 minmax(0, 1fr) 替代 1fr，允许轨道压缩到 0
- 子项层：直接子元素加 min-width: 0（图片、<pre class="brush:php;toolbar:false;"></pre>、嵌套 Flex/Grid 尤其要加）
- 若需文字截断：再加 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
注意：minmax(0, 1fr) 在 Safari 14.1 及更早版本有兼容问题，可用 @supports (grid-template-columns: minmax(0, 1fr)) 包裹降级。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
