我在grid中显示了一堆div，它们的数量是动态变化的，我想让它们成为scrollable，但是当我添加到容器overflow-y: scroll时，我不能向下滚动。我想这是容器高度的问题，但是我不知道如何让它动态地选择所有div的高度。
目前我只有：

.container{
    overflow-y: scroll;
    display: grid;
    grid-template-columns: repeat(4,minmax(22vw, 1fr));
    gap: 20px;
}

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

这是HTML：

<div className={style.container}>
 <div className={style.card}>
                <div className={style.pic} style={{ backgroundImage: `url(${pic})` }} />
                <div className={style.jam_details}>
                    <div className={style.jam_name}>
                        <span>Artist Name</span>
                        <span>, </span>
                        <span>Song Name</span>
                    </div>
                    <div className={style.jam_respect}>
                        <span>Likes</span>
                        <span>Songs</span>
                        <span>Playbacks</span>
                        <span>Released</span>
                    </div>
                </div>
            </div>
        </div>

我希望网格是可滚动的