如何阻止main-content-inner随内容扩张，启用滚动保持尺寸不变？

要实现main-content-inner固定尺寸、内容超出时滚动且不改变其他元素大小的效果，只需调整两处CSS规则：

修改要点 #

• 给.app-layout添加overflow: hidden，限制它的高度严格遵循父级Grid分配的空间，避免被内部内容撑开
• 将.main-content-inner的overflow: scroll改为overflow: auto（可选优化，仅在内容超出时显示滚动条）

修改后的完整CSS代码 #

#root {
    width: 50dvw;
    height: 50dvh;
    border: 1px solid red;
}

.app {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: 34px auto;
    grid-template-columns: auto;
    grid-template-areas:
        "title-bar"
        "app-layout";
}
.title-bar {
    grid-area: title-bar;
    width: 100%;
    height: 100%;
    background-color: lightgray;
}
.app-layout {
    grid-area: app-layout;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 240px auto;
    grid-template-areas:
        "side-bar main-content main-content";
    gap: 10px;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden; /* 新增：阻止内容撑开容器 */
}
.side-bar {
    grid-area: side-bar;
    width: 100%;
    height: 100%;
    background-color: lightgray;
}
.main-content {
    grid-area: main-content;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}
.main-content-inner {
    height: 100%;
    width: 100%;
    overflow: auto; /* 优化：仅内容超出时显示滚动条 */
    background-color: lightgray;
}

原理说明 #

• #root固定了整体容器的宽高，.app通过Grid将空间分为标题栏和下方布局区域
• .app-layout添加overflow: hidden后，它的高度会严格限制在父级分配的空间内（即#root高度减去标题栏的34px），不会因为内部内容过多而扩张
• .main-content-inner设置height:100%继承父容器高度，overflow:auto让超出的内容在内部滚动，完全不影响外部元素的尺寸

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