深层嵌套Div的CSS overflow-y无法纵向滚动：原因及解决方案

我看了你的布局结构，问题出在高度继承的链条断裂上——你用了max-height: 100%，但这个属性生效的前提是父元素有一个明确的、可计算的高度值，而不是跟着内容自适应的高度。

问题到底出在哪？ #

你的嵌套grid布局里，从.route-container到.content-container这些父容器，都只设置了max-height: 100%，但没有给它们设置height: 100%。grid容器默认会根据内容自动调整高度，所以max-height: 100%在这里等于“没有上限”——因为父元素的高度本身就是内容高度，子元素的max-height:100%自然也跟着内容走，根本不会触发滚动。

举个例子：.tab-container的父元素.outer-container如果没有明确的height:100%，它的高度就是.tab-menu加上.tab-container的内容高度，.tab-container的max-height:100%就等于这个总高度，完全起不到限制作用。

最佳修复方案 #

给所有嵌套的grid容器添加height: 100%，让高度继承链从最外层的#app一直传递到最内层的滚动容器，这样每个层级都有明确的高度上限，overflow-y: scroll才能正确生效。

修改后的CSS代码如下：

html body { margin: 0; }
#app { padding-top: 60px; width: 100vw; height: 100vh; background: black; height: calc(100vh - 60px); }
#navbar { position: fixed; top: 0; left: 0; width: 100%; height: 60px; z-index: 9999; background: cyan; }
/* 添加height:100%，确保占满父容器高度 */
.route-container { display: grid; grid-template-columns: 0.2fr 0.8fr; grid-template-rows: auto; grid-template-areas: "sidemenu container"; height:100%; max-height: 100%; overflow: hidden; background: magenta; }
.outer-side-menu { background: orange; grid-area: sidemenu; }
/* 添加height:100% */
.outer-container { grid-area: container; background: yellow; display: grid; grid-template-columns: 1fr; grid-template-rows: 50px auto; grid-template-areas: "tab-menu" "tab-container"; height:100%; overflow: hidden; max-height: 100%; }
.tab-menu { grid-area: tab-menu; background: red; }
/* 添加height:100% */
.tab-container { grid-area: tab-container; background: purple; height:100%; max-height: 100%; overflow: hidden; }
/* 添加height:100% */
.content-container { display: grid; grid-template-columns: 0.35fr 0.65fr; grid-template-rows: auto; grid-template-areas: "inner-menu inner-content"; height:100%; max-height: 100%; overflow: hidden; font-size: 144px; background: teal; }
.inner-menu { grid-area: inner-menu; overflow-y: scroll; background: pink; }
.inner-content { grid-area: inner-content; overflow-y: scroll; background: teal; }

额外说明 #

• 你可以保留max-height:100%作为兜底，但核心是height:100%确保每个容器都占满父元素的可用高度。
• 最内层的滚动容器不需要设置max-height，它们会自动填充父容器的高度，当内容超出时就会触发纵向滚动。

内容的提问来源于stack exchange，提问作者Sam Esmail