为什么CSS Grid中子元素超出高度时不产生滚动条？-css教程-PHP中文网

grid item 上设 overflow-y: auto 没反应，根本原因是父级行轨道未被约束：1fr 默认等价于 minmax(min-content, 1fr)，会撑开以容纳内容最小高度；必须改为 minmax(0, 1fr)，并确保 grid 容器有明确高度（如 height 或 max-height），才能使子项内部 overflow 生效。

为什么css grid中子元素超出高度时不产生滚动条？

grid item 上设 `overflow-y: auto` 没反应？检查父级行轨道是否真被约束

根本原因不是 CSS 写错了，而是 grid-template-rows 用 1fr 时默认等价于 minmax(min-content, 1fr) —— 它会优先撑开以容纳内容最小高度，导致子元素永远“不溢出”。滚动条只在内容真正超出可用空间时才触发。

必须把行轨道改成可收缩的：minmax(0, 1fr)。它允许轨道压缩到 0，把高度控制权交还给子元素内部的 overflow 行为。

grid-template-rows: 100px 1fr 80px → 中间行会无限拉伸，哪怕内容超长也不滚动
grid-template-rows: 100px minmax(0, 1fr) 80px → 中间行能收缩，子元素才能触发滚动
这个改动只有在 grid 容器本身有明确高度（如 height: 500px 或 max-height: 70vh）时才生效

给 grid item 直接加 `height` 和 `overflow` 还是不滚动？确认它是不是块级盒 + 高度没被拉伸

即使你写了 height: 300px; overflow-y: auto，如果该 item 的 align-self 是 stretch（默认值），而父轨道又没约束高度，它仍可能被撑开——此时 height 被忽略，overflow 失效。

更可靠的做法是：不在 item 上硬设 height，而在其内部嵌套一层

，并确保：
grid item 本身是块级（默认就是），且未设置 align-self: center/flex-start 等干扰高度计算的值

.scroller 设 height: 100%; overflow-y: auto

grid item 的父轨道（即 grid-template-rows 对应的那行）已用 minmax(0, 1fr) 或固定值约束

滚动条出现了，但内容被截断或位置偏移？注意滚动条真实占用宽度
滚动条不是视觉装饰，它会从容器 width 中扣除约 15–17px。当 grid 容器设为 width: 100% 且内容刚好填满时，滚动条一出现，所有 1fr 列宽都会同比例收缩，造成布局跳动。

											
												
												
													CSS工具箱(专业版)
													全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。
												
												下载
												
											
										
这不是 Grid 特有，但在 Grid 中因尺寸联动强，更容易暴露。防御方式包括：

全局让垂直滚动条常驻：html { overflow-y: scroll; }，再配 body { width: 100vw; overflow: hidden; }

局部处理：给 grid 容器加 padding-right: 17px，或用 width: calc(100% + 17px); overflow-x: hidden 占位
Safari 旧版（iOS 15.3 及更早）可能丢弃 grid-template-areas，建议改用线号定位：header { grid-column: 1 / -1; grid-row: 1; }


为什么窄屏下整个页面横向滚动？和 Grid 有关，但根子在 body 默认边距
90% 的意外水平滚动，源头是浏览器给 body 设的默认 margin: 8px。这 16px 水平空间在窄屏下直接触发横向滚动条，哪怕你在 html 上写了 overflow-x: hidden 也无效。
必须显式重置：

body { margin: 0; padding: 0; box-sizing: border-box; }
Grid 子项加 min-width: 0（防止长单词/图片撑破列宽）
图片等媒体元素补 max-width: 100%; height: auto;

慎用 auto-fill，它可能生成过宽隐式轨道



滚动条是否出现，取决于“内容是否真的超出可用空间”，而不是样式有没有写上。Grid 的轨道行为、父容器的高度链、子元素的盒模型状态，三者缺一不可。最容易被忽略的是：没有给 grid 容器设 height 或 max-height，就指望 1fr 自动产生滚动——这时整个轨道链都是塌陷的，overflow 根本没机会工作。