如何使用CSS实现子元素可滚动、父元素尺寸不被撑大

问题原因 #

你遇到的页面被撑开的问题是多层Grid布局的常见踩坑点，核心缺失两个规则配置：

1. Grid子项默认min-height: auto，优先级高于父容器的高度限制，内容超出时会强制撑开父容器
2. .list的overflow:auto需要明确的高度上限才会触发滚动，你当前的配置没有给.list设置可用高度边界

修改方案 #

只需修改3处CSS即可实现预期效果：

1. 给#modules新增高度限制规则 #

#modules {
    grid-area: modules;
    padding: 32px;
    box-sizing: border-box;
    display: grid;
    gap: 20px 40px;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-areas:
      "graph present absent";
    /* 新增以下两行 */
    min-height: 0;
    height: 100%;
}

2. 给.module新增flex布局规则 #

.module {
    background-color: white;
    border-radius: 6px;
    border: 1px solid lightgray;
    box-shadow: 1px 2px #CECECE;
    /* 新增以下两行 */
    display: flex;
    flex-direction: column;
}

3. 给.module .list新增占满剩余高度规则 #

.module .list {
    overflow: auto;
    /* 新增以下一行 */
    flex-grow: 1;
}

原理解释 #

• min-height: 0是Grid布局的核心修复点：Grid容器的直接子项默认min-height值为auto，规则优先级高于父容器的高度限制，只要子内容高度超过父容器，就会强制撑开父容器，设置min-height: 0会关闭这个默认规则，让父容器的高度限制正常生效。
• flex-grow:1配合.module的列弹性布局，会让.list自动占满.module除了固定高度的.title之外的所有可用高度，既不用写死高度适配不同布局，也给overflow:auto提供了明确的高度边界，内容超出就会自动触发滚动条。

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