overflow: hidden 不能修复 grid 容器塌陷，因其不提供高度基准、不解决 fr 计算前提、会干扰子项弹性收缩，且在打印/缩放时加剧布局错位。
overflow: hidden 并不修复 Grid 容器自身塌陷
很多人加 overflow: hidden 是冲着“清浮动”去的，但 Grid 容器本身不靠浮动，它塌陷的原因完全不同。常见错觉是：加了 overflow: hidden 后子项看起来“归位”了，其实是父容器被强制触发 BFC、意外撑开了高度——但这只是表象，根源没动。真正问题常出在：grid-template-rows 用了 1fr 却没给容器设 min-height，或容器嵌在 position: absolute / flex 父级里且父级无高。
验证方法：打开开发者工具，看该 Grid 容器的 Computed Height 是否为 0px 或远小于预期。如果是，overflow: hidden 只是让内容不溢出，对计算轨道毫无帮助。
- 临时删掉
overflow: hidden，观察布局是否立刻“消失”或收缩——若会，说明它只是掩盖了高度缺失 - 改用
min-height: 100vh（不是height: 100vh），确保有基准可算fr - 若容器父级是
display: flex，检查父级是否漏写了height或min-height
overflow: hidden 会干扰 grid 子项的弹性收缩能力
Grid 子项默认可收缩（min-width: auto），但一旦父容器设了 overflow: hidden，某些浏览器（尤其是 Safari 和旧版 Chrome）会误判其“不可缩”，导致 minmax(0, 1fr) 失效、内容溢出或列宽崩坏。这不是规范行为，而是渲染引擎的兼容性偏差。
典型现象：两列 grid-template-columns: 1fr 1fr，右侧文字稍长，整列就撑开、左侧被压缩，视觉上严重不均。
- 给所有直接子项显式加
min-width: 0和overflow: hidden，释放收缩权限 - 避免在 Grid 容器上同时用
overflow: hidden和grid-template-columns混用fr与固定像素（如200px 1fr） - 若必须截断文本，优先在子项内控制：
text-overflow: ellipsis; white-space: nowrap; overflow: hidden
打印/缩放场景下 overflow: hidden 会让错位更隐蔽
在 @media print 或用户开启字体缩放时，overflow: hidden 不仅不能防错位，反而会把本该换行的内容硬截断，造成空白区域或分页断裂。此时 Grid 的 fr 计算已不稳定，再叠加隐藏溢出，布局语义彻底丢失。
例如：打印预览中看到卡片内容被切掉一半，但页面上一切正常——大概率是 overflow: hidden 在缩放后放大了裁剪边界。
- 打印样式中应移除 Grid 容器的
overflow: hidden，改用break-inside: avoid防分页切断 - 响应式断点里慎用
overflow: hidden，尤其当子项含transform、position: absolute或flex时，它们会直接让该声明失效 - 真要防内容撑破，用
max-width: 100%+box-sizing: border-box更安全
overflow: hidden 是一个视觉裁剪指令，不是布局修复开关。它既不提供高度基准，也不保证弹性分配，更不解决跨环境渲染差异。错位真正卡点，永远在「可用空间是否明确」「子项是否被锁死宽度」「环境上下文是否被忽略」这三处。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
