直接给grid容器加overflow: hidden无效，因为撑破发生在轨道计算阶段——内容min-content拉宽轨道导致容器被动变宽，而非内容溢出容器边界；真正生效需minmax(0, 1fr)与网格直接子项min-width: 0配合，缺一则轨道无法收缩。
为什么直接给Grid容器加overflow没用
因为撑破行为发生在轨道计算阶段，不是内容“溢出”容器，而是内容的min-content把轨道拉宽了。浏览器根本没走到“裁剪”那步——overflow: hidden作用对象是容器边界，但此时容器已经变宽，内容仍在“内部”。典型现象：列里放一个长URL，.grid { overflow: hidden; grid-template-columns: 1fr 1fr; }，整行照样横向滚动。
minmax(0, 1fr)必须配min-width: 0
单写grid-template-columns: minmax(0, 1fr)只是告诉轨道“可以缩到0”，但网格项默认min-width: auto（≈min-width: min-content），会顶住不缩。两者必须同时生效：
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);.grid > * { min-width: 0; }
漏掉任一环，轨道就缩不下去。嵌套Grid或Flex子项也要递归加min-width: 0，否则溢出会传导。
网格项上设overflow前必须有尺寸约束
只写overflow: auto不会触发滚动，因为子项没有明确宽高限制。它需要：
- 由Grid轨道提供约束（如
1fr列宽已生效） - 或显式设置
width/max-width/height/max-height - 配合
word-break: break-word或overflow-wrap: break-word处理长单词
常见错误：在white-space: nowrap下只加overflow: hidden却不设width，结果文字照常撑开。
Safari和滚动条占位是隐藏雷区
Safari 14.1及更早对minmax(0, 1fr)解析不稳定，可能让列宽归零；macOS下overflow: auto滚动条默认隐藏但占位，Windows则始终显示，导致右侧留白抖动。稳妥做法：
- 用
scrollbar-gutter: stable预留滚动条空间（Chrome/Edge/Firefox支持） - 或统一加
padding-right: 16px+overflow-y: auto+::-webkit-scrollbar { display: none; } - 避免在响应式断点中动态切换
overflow值，易引发重排
最易被忽略的是：图片、<pre class="brush:php;toolbar:false;"></pre>、<table>等固有尺寸元素，它们的<code>min-width不会自动继承父级min-width: 0，必须单独加。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
