如何在CSS网格中设置列的高度以使其可滚动

Question

我删除了多余的代码，但我认为这是我需要做的核心。我目前正在将一个活动列表映射到第一个grid_column中。然而，这个列表很长，有40个项目，我需要滚动整个页面才能看到它。我希望能够在第一列上设置一个高度，然后在上面设置overflow: scroll，将视图限制在10个项目，然后滚动其余项目。我似乎无法在列上设置高度或在列上添加溢出。

#main-content.container {
padding: 0 20px;
max-width: 1200px;
margin: 0 auto;
}
.grid {
display: grid;
grid-template-columns: 1fr 3fr;
gap: 74px;
}
.grid__column {
height: 10rem;
}

html:

<div id="main-content" className="container">
<div className="grid">
<div className="grid__column">
<div className="first-grid__column-title">Scroll Table</div>
<ActivitiesGuide />
</div>
<div className="grid__column">
<div className="second-grid__column-title">Second Column</div>
</div>
</div>
</div>

Answer 1

John，我不确定你到底在问什么，但我确实发现这个问题可能会对你有所帮助。

将滚动添加到divs

我希望这能给你一个见解，或者一个正确方向的想法。