如何让div保持网格行1fr高度，实现子元素垂直滚动

你的问题核心在于.list元素没有被限制高度，导致它的内容会撑开父容器.container1/.container2，进而突破Grid布局中1fr的行高限制。只需调整CSS，让.list占满父容器高度并开启垂直滚动即可解决。

修改后的CSS代码 #

.grid {
    display: grid;
    grid-template-columns: 350px 1fr;
    grid-template-rows: 1fr 1fr;
    border: 1px solid black;
    height: 100vh;
    width: 100vw;
    overflow: hidden; /* 可选：彻底防止Grid容器被内容撑开 */
}

.container1 {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    border: 1px solid red;
    display: flex;
    flex-direction: column; /* 让内部元素可以填充容器高度 */
}

.container2 {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    border: 1px solid blue;
    display: flex;
    flex-direction: column; /* 同上 */
}

.list {
    flex: 1; /* 占满父容器的剩余高度 */
    overflow-y: auto; /* 内容超出时自动显示垂直滚动条 */
}

原理说明 #

• 给.container1和.container2添加flex布局，让内部的.list可以通过flex:1自动填充容器的可用高度，不会被内容撑开。
• .list的overflow-y:auto确保只有在内容超出容器高度时才显示滚动条，既满足滚动需求，又保持布局整洁。

替代方案（无需flex布局） #

如果不想用flex，也可以通过绝对定位实现：

.container1, .container2 {
    grid-column: 1 / 2;
    height: 100%;
    position: relative;
    border: 1px solid red; /* container2换成blue */
}

.list {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: auto;
}

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