grid容器加overflow: hidden无效，因默认不创建bfc且子项min-width: auto强行撑开轨道；需在子项设min-width: 0/min-height: 0，并配合明确尺寸约束或max-width/max-height才能触发裁剪。
为什么直接给Grid容器加overflow: hidden没用
因为Grid容器默认不创建BFC，且子项会按min-content尺寸强行撑开轨道——哪怕你写了overflow: hidden，浏览器也认为“容器还没被撑满”，裁剪根本不会触发。常见现象是文字或图片从右侧/底部“漏出来”，边框都拦不住。
真正起作用的不是容器的overflow，而是：容器有明确尺寸约束 + 子项允许收缩 + 裁剪落在子项自身上。
min-width: 0和min-height: 0必须加在子项上
Grid子项默认min-width: auto，这是它拒绝压缩、死扛长文本/图片的根本原因。不加这句，overflow: hidden就是摆设。
- 对单行文本：
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap - 对多行或含图片的子项：
min-width: 0; min-height: 0; overflow: hidden（再配合max-width: 100%和word-break: break-word） - 如果子项用了
display: flex或display: grid，也要在它的直接子元素上重复加min-width: 0，否则内层flex item照样撑开
子项overflow: hidden生效的前提是它有“可裁剪的空间边界”
光写overflow: hidden不行，子项得知道自己最多能占多大。它依赖两个条件之一：
- 父Grid容器定义了明确轨道尺寸，比如
grid-template-columns: minmax(0, 1fr) 200px，其中minmax(0, 1fr)比单纯1fr更关键 - 子项自身设了
max-width或max-height，例如max-width: 100%; max-height: 80px;，此时overflow: hidden才开始裁剪内容 - 避免用
grid-column: span 2却不加min-width: 0——这种子项会彻底无视容器宽度，裁剪失效
iOS Safari和绝对定位子元素的隐藏陷阱
overflow: hidden在移动端尤其容易翻车：
- iOS 15.4之前，
overflow: hidden+transform组合可能完全失效，内容照常溢出；加-webkit-transform: translateZ(0)反而更糟 - 子项里有
position: absolute元素（比如气泡提示、角标），它们会脱离文档流，overflow: hidden大概率裁不掉——除非父容器也设了position: relative - 不要指望
overflow: hidden来“掩盖”布局失控；先检查box-sizing是否为border-box，再确认padding/border有没有偷偷吃掉可用空间
最易被忽略的一点：裁剪只发生在渲染层，不改变盒模型尺寸。如果一个子项内部有margin-top: 20px，即使顶部被overflow: hidden裁掉，它仍会把下方格子往下推——这不是bug，是CSS本来就这样工作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
