grid容器上设overflow无效是因为默认不创建BFC，需在子项设min-width:0/min-height:0并配合overflow才能生效，或在网格轨道用minmax(0,1fr)控制弹性。
grid 容器上设 overflow 无效？先确认作用对象
很多人在 grid 容器（即设了 display: grid 的父元素）上直接写 overflow: hidden，发现子项依然溢出、滚动条不出现——这是因为 overflow 只对「块级格式化上下文（BFC）触发者」生效，而默认 grid 容器**不自动创建 BFC**。必须显式让容器成为 BFC，常见方式是加 overflow: hidden 同时配合 contain: layout 或 display: flow-root，但更稳妥的做法是：把 overflow 放在**有明确宽高的网格轨道内单元格**上，而非整个 grid 容器。
子项内容溢出时，min-width: 0 和 min-height: 0 是关键
Grid 子项默认具有 min-width: auto（等价于 min-width: min-content），这会阻止它被网格轨道压缩，导致文字撑开列宽、图片突破行高。要让内容可收缩，必须显式重置最小尺寸：
.grid-item {
min-width: 0;
min-height: 0;
}- 仅设
overflow: hidden不够，必须配min-width: 0才能触发截断 - 如果子项含弹性布局（如
display: flex），也要在 flex 容器上加min-width: 0 - 使用
text-overflow: ellipsis时，还需确保元素是块级、有固定宽、且white-space: nowrap
用 grid-template-columns 配合 minmax() 控制列宽弹性
单纯靠子项样式无法解决列轨道本身过宽的问题。应从网格定义层约束列行为：
.grid-container {
display: grid;
grid-template-columns:
100px
minmax(0, 1fr) /* 允许压缩到 0 */
200px;
}-
minmax(0, 1fr)比1fr更安全：避免内容强制撑开该列 - 避免用
auto或max-content作轨道大小，它们会响应内容尺寸 - 若某列需严格限制最大宽度，可用
minmax(0, 300px)
滚动容器嵌套时，overflow 层级和 overscroll-behavior 要协同
当 grid 子项内部是长列表或卡片流，需要局部滚动时，容易出现双滚动条或滚动穿透。此时需明确滚动边界：
立即学习“前端免费学习笔记（深入）”；
.scrollable-cell {
overflow-y: auto;
overscroll-behavior-y: contain; /* 阻止滚到底后触发外层滚动 */
height: 200px;
min-width: 0;
}- 必须设明确
height或max-height，否则overflow-y: auto无效 -
overscroll-behavior在 iOS Safari 和 Chrome 中支持良好，但 Firefox 需注意版本 - 不要在 grid 容器和子项上同时设
overflow: scroll，优先由具体需要滚动的单元格控制
实际中最容易忽略的是 min-width: 0 这一行——它不像 overflow 那样直观，但缺了它，网格的收缩能力就形同虚设。
