必须为每个grid直接子元素显式设置min-width: 0或min-height: 0以防止内容溢出撑开轨道；仅overflow: hidden无效，因不改变尺寸计算逻辑；嵌套flex容器及替换元素需分层处理。
grid容器内子元素溢出导致网格塌陷
Grid布局里，子元素内容（比如一张大图、长文本或设置了固定宽高的块）超出自身网格轨道时，会强行撑开轨道，破坏你定义的grid-template-columns和grid-template-rows。这不是bug，是CSS默认的“最小尺寸优先”行为在起作用。
常见现象：grid-template-columns: 1fr 2fr写得好好的，结果右边列比左边宽出一倍还不止；或者grid-auto-rows: minmax(100px, auto)完全没生效，行高直接被内容顶到200px。
- 根本原因是：默认情况下，
min-width和min-height对grid item生效，且初始值为auto，浏览器会按内容撑开最小尺寸 - 解决方向不是“限制内容”，而是“重置item的尺寸约束”
- 关键CSS属性是
min-width: 0和min-height: 0，必须显式设置在grid item上（不是容器）
为什么只加overflow: hidden不够用
overflow: hidden能裁剪内容，但不改变item的**内在尺寸计算逻辑**。它只是视觉遮盖，浏览器依然按原始内容宽度参与网格轨道分配，尤其在fr单位或auto-fit场景下，会导致其他轨道被错误压缩或拉伸。
典型误操作：.container { display: grid; grid-template-columns: 1fr 1fr; } .item { overflow: hidden; } —— 这几乎没用，除非你还加了min-width: 0。
-
overflow本身不会触发BFC或改变盒模型计算顺序 - 只有当
min-width: 0（或min-height: 0）存在时，overflow: hidden才真正获得“裁剪权” - 移动端Webview中，漏掉
min-width: 0还可能引发横向滚动条意外出现
flex容器嵌套在grid item里的特殊风险
很多人把display: flex加在grid item内部来排布子元素，结果发现flex子项又把grid item撑开了——这是双重最小尺寸叠加：grid item有min-width: auto，它里面的flex容器也有min-width: auto，两者都不设限，内容就一路顶上去。
正确做法是分层控制：
- grid item本身必须设
min-width: 0（或min-height: 0，取决于流向） - 如果它内部是flex容器，也建议同步加
min-width: 0，避免flex算法再次“保护”内容尺寸 - 慎用
flex: 1在grid item里——它等价于flex: 1 1 0%，但初始主轴尺寸仍是auto，仍需min-width: 0兜底
图片/iframe等替换元素的处理差异
替换元素（如<img>、<iframe></iframe>、<canvas></canvas>）有自己的固有尺寸，在grid中更难驯服。它们不仅受min-width影响，还受max-width和width层级关系制约。
最简方案是统一用width: 100% + height: auto，但前提是父级已解除最小尺寸锁定：
- grid item：加
min-width: 0 - 图片本身：加
width: 100%; height: auto; display: block;（display: block防底部空白） - 避免对替换元素设
max-width: 100%却不设width，这在某些旧版Safari中失效
真正卡住人的地方，往往不是忘了加min-width: 0，而是加在了grid容器上，或者只加在部分item上而漏掉了嵌套flex层。只要记住：每个可能承载内容的grid直接子元素，都得单独检查这一条。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
