无法使 div 网格可滚动答案

【问题标题】：Can't make A grid of divs scrollable无法使 div 网格可滚动
【发布时间】：2022-12-09 08:29:01
【问题描述】：

我在 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>

我希望网格可以滚动

【问题讨论】：

您可以为容器定义固定高度。

标签： html css scroll css-grid

【解决方案1】：

您的网格元素必须具有指定的 height 才能正常工作（即，默认值 auto 以外的值），否则网格元素将垂直增长以容纳其全部内容，因此无法滚动。指定高度后，您只需设置overflow: auto; 即可打开滚动。

.container {
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    padding: 1em;
    gap: 1em;
    height: 60vh;
    border: 5px solid blue;
}

.card {
    border-radius: 8px;
    background-color: red;
    aspect-ratio: 1/1;
}

<div class="container">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

【讨论】：