grid布局的动态div列表无法实现垂直滚动问题求助

你的判断没错，问题核心就是容器没有设置高度限制。Grid布局默认会自动撑开容器高度以容纳所有子元素，此时overflow-y: scroll不会生效——因为容器高度和内容高度完全一致，没有超出的部分。

解决方案 #

给容器添加固定高度或最大高度限制，让容器高度小于内容总高度时触发滚动，同时保留Grid的列布局：

修改后的CSS代码

.container{
    overflow-y: scroll;
    display: grid;
    grid-template-columns: repeat(4,minmax(22vw, 1fr));
    gap: 20px;
    /* 添加高度限制，示例用视口高度80%，可根据需求调整 */
    height: 80vh;
    /* 可选：优化滚动条样式（部分浏览器兼容） */
    /* scrollbar-width: thin; */
}

.card{
    width: 20vw;
    height: 25vh;
    border-radius: 8px;
    background-color: var(--secondary-color);
}

更灵活的高度设置方式 #

如果不想用固定视口高度，也可以基于父容器高度做计算：

.container{
    /* 假设父容器有固定高度，这里减去头部/底部的占位高度 */
    max-height: calc(100% - 60px);
    overflow-y: scroll;
    display: grid;
    grid-template-columns: repeat(4,minmax(22vw, 1fr));
    gap: 20px;
}

关键原理 #

当容器设置了明确的height或max-height后，Grid布局的内容总高度超过容器限制时，overflow-y: scroll就会生效，容器会显示垂直滚动条，同时保持4列的网格布局结构不变。

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