在固定元素上滚动:CSS

Question

我有一个div，里面有另一个div。第二个div里面有卡片。由于第一个div是固定的，我无法滚动第二个div里面的卡片，我需要滚动这些卡片。第二个div不是强制性的。下面的代码是html及其对应的css。

.HumCategoriesWrapper {
display: flex;
align-items: center;
flex-direction: column;
/* width: 30%; */
padding: 0 20px 0 20px;
max-width: 1000px;
margin: 0 auto;
background: #1C1E2B;
float: left;
min-height: 100vh;
position: fixed;
right: 0;
overflow: hidden;
}
.HomePageWrapper {
width: 80vw;
float: right;
}

<div className="HumCategoriesWrapper">
<h2 style={{paddingTop: "40px", paddingBottom: "20px", width: "100%", color: "white"}}>Hum Categories</h2>
<div contenteditable className="humCatCards">
<HomeCard />
<HomeCard />
<HomeCard />
<HomeCard />
<HomeCard />
<HomeCard />
<HomeCard />
</div>
</div>
</div>

Answer 1

您可以使用max-height和overflow-y: auto来实现这一点。

.HumCategoriesWrapper {
display: flex;
align-items: center;
flex-direction: column;
/* width: 30%; */
padding: 0 20px 0 20px;
max-width: 1000px;
margin: 0 auto;
background: #1C1E2B;
float: left;
min-height: 100vh;
position: fixed;
right: 0;
overflow: hidden;
}
.HomePageWrapper {
width: 80vw;
float: right;
}
.humCatCards {
max-height: 100px;
overflow-y: auto;
color: #fff;
}

<div class="HumCategoriesWrapper">
<h2 style={{paddingTop: "40px", paddingBottom: "20px", width: "100%", color: "white"}}>Hum Categories</h2>
<div contenteditable class="humCatCards">
<p>
HomeCard
</p>
<p>
HomeCard
</p>
<p>
HomeCard
</p>
<p>
HomeCard
</p>
<p>
HomeCard
</p>

</div>
</div>

工作Fiddle