CSS Grid子元素内容溢出时overflow-y滚动失效解决方案

overflow-y: scroll 生效的核心前提是元素本身有明确的高度约束，不会被内部内容撑开。你的代码里滚动不生效是两个问题导致的：

• 高度链路断裂：.main 容器用grid布局设置了auto 1fr auto的行规则，但中间行对应的.content容器没有设置高度约束，默认height: auto会直接被内部内容撑开，无法被限制在grid分配的1fr高度内。
• Grid默认规则拦截收缩：CSS Grid布局的子项默认值为min-height: auto，这个规则会强制子项高度不小于内部内容的高度，哪怕父级给子项分配了固定比例的高度，只要内容超高，子项就会被撑开，无法触发内部滚动。

只需要补全高度约束，同时给需要触发内部滚动的grid子项覆盖默认的min-height: auto规则即可：

1. 给.content容器补全高度设置，让它占满grid分配的剩余高度
2. 给布局链路中所有grid子项添加min-height: 0，允许容器在内容超高时收缩到grid分配的高度，而不是被内容撑开

修复后的完整CSS代码如下：

html, body {
  height: 100%;
  margin: 0; /* 可选：清除浏览器默认边距，避免出现多余滚动条 */
}

.main {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
header, footer {
  height: 80px;
  background-color: yellow;
}
/* 补全content容器的高度约束 */
.content {
  height: 100%;
  min-height: 0;
}
.content-wrapper {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0; /* 覆盖grid默认min-height规则 */
}
.title {
  padding: 24px;
  width: 100%;
}
.main-content {
  width: 100%;
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr 350px;
  justify-content: space-around;
  min-height: 0; /* 覆盖grid默认min-height规则 */
}

.main-panel {
  display: grid;
  grid-template-rows: auto 1fr;
  border: 2px solid red;
  min-height: 0; /* 可选：如果主面板后续也需要滚动可以保留，不需要可以删掉 */
}

.side-panel {
  height: 100%;
  width: 100%;
  min-height: 0; /* 覆盖grid默认min-height规则 */
}

.side-panel-wrapper {
  height: 100%;
  background: #f8f9fa;
  box-shadow: 0px 4px 10px rgb(0 0 0 / 10%);
  display: grid;
  grid-template-rows: auto 1fr;
}

.side-panel-header {
  background-color: #ffffff;
  padding: 24px;
  border-bottom: 2px solid #e6e9f0;
}

.side-panel-content {
  overflow-y: scroll;
  min-height: 0; /* 覆盖grid默认min-height规则 */
}

.long-content {
  height: 3000px;
}

• 整页固定占满视口高度，不会出现整页级别的滚动条
• 当.long-content高度较小时，布局和原有表现完全一致，没有多余空白
• 当.long-content高度超出容器剩余空间时，只会在.side-panel-content区域出现滚动条，不会撑开父级容器破坏整体布局

内容的提问来源于stack exchange，提问作者Renaud is Not Bill Gates