minmax() 不导致溢出，但误用参数会失效；正确用法是 minmax(0, 1fr) 配合子元素 min-width: 0，才能激活收缩逻辑并防止撑破容器。
minmax() 本身不导致溢出，但用错参数会失效
很多人看到 minmax(400px, 1fr) 就以为“最小 400px”是安全的，结果小屏上整行横向滚动——这不是 minmax() 的错，是它被当成了“保底宽度”，而实际它定义的是**单列可伸缩区间**。浏览器先按 400px 尝试铺列，发现容器宽只有 380px？那就直接撑破，不缩、不换、不退让。
真正起作用的收缩组合是 minmax(0, 1fr)，其中 0 是关键：它告诉 Grid 轨道“可以压到 0”，从而激活后续的裁剪逻辑。但只写这个还不够。
-
minmax(0, 1fr)必须配网格直接子元素的min-width: 0，否则子项仍顶着min-content不缩 - 含图片、
<pre class="brush:php;toolbar:false;"></pre>、<table> 的子项，若内部还有 Flex/Grid，其子元素也得加 <code>min-width: 0 - Safari 14.1 及更早版本对
0解析异常，可用@supports (grid-template-columns: minmax(0, 1fr)))做检测 - 没给
.grid > *加min-width: 0 - 子项用了
display: flex，但没给它的直接子元素加min-width: 0 - 子项里有图片，却没设
max-width: 100%或width: 100% - 容器加
overflow: hidden≠ 防止撑开；它只在轨道已收缩后，才对子项内联内容起作用 - 想截断文字，必须在子项上同时满足：
min-width: 0+white-space: nowrap+overflow: hidden+text-overflow: ellipsis - 想让子项内部可滚动，得给它加
max-height（不能只靠overflow: auto）
为什么 grid-template-columns: 1fr 1fr 也会溢出
因为 1fr 没有下限。它等价于 minmax(auto, 1fr)，而 auto 就是 min-content——一个没空格的长 URL、JSON 字段或 base64 字符串，就能把整列拉宽到几百像素，另一列被压缩成一条线。
你改了 grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)，但 DevTools 里还是看到列宽不均？大概率是漏了这步：
overflow: hidden 加在容器上为什么没用
overflow: hidden 控制的是“容器边界外的内容是否可见”，但溢出行为发生在轨道计算阶段——内容还没溢出，轨道已经被撑开了。此时 overflow 根本没东西可裁。
真正要裁的，是网格项自身。所以：
box-sizing 和 gap 会悄悄放大溢出风险
如果 box-sizing 还是默认的 content-box，那 padding 和 gap 就是叠加关系。比如容器 width: 300px、padding: 10px、gap: 20px，实际内容区只剩 280px —— 但你写的 minmax(250px, 1fr) 仍会硬占 250px，再加 gap，立刻超限。
验证方法很简单：打开 DevTools → Computed 面板，查 box-sizing 是否为 border-box；Layout 面板勾选 “Show box model”，看 content 区是否填满 border box。
最稳妥的做法是全局加：* { box-sizing: border-box; }，再用精确选择器覆盖掉第三方组件的干扰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
