这是我要设置样式的 HTML：
<div id="cards-text-wrap">
<h1 class="text">Some text here</h1>
<div class="card-wrapper">
<div class="scrollable-card"></div>
<div class="scrollable-card"></div>
<div class="scrollable-card"></div>
<div class="scrollable-card"></div>
<div class="scrollable-card"></div>
</div>
</div>
我想让“可滚动卡片”div 实际上可以滚动（横向）。现在它们只是调整大小以适应同一条线，这意味着它不会在 Y 轴上溢出，这很好。但它并没有在 x 轴上溢出，这正是我想要的。
我尝试了一堆不同的方法，所有这些都导致了同样的错误结果。在这个例子中，我使用 overflow-x 试图让它溢出视口，但它仍然没有这样做。
CSS 看起来像这样：
#cards-text-wrap {
background: #D9D9D9;
width: auto;
height: 300px;
margin: 230px 0 0 0;
text-align: center;
}
.text {
background: #D9D9D9;
margin: 10px 0 0 0;
text-align: center;
font-size: 2rem;
}
.scrollable-card {
width: 180px;
height: 210px;
background: white;
border-radius: 26px;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
display: inline-block;
margin: 0 20px;
resize: none;
}
.card-wrapper {
display: flex;
flex-wrap: nowrap;
height: 210px;
overflow-x: scroll;
width: auto;
margin-top: 10px;
}
我从中得到的结果是最外层的 div 看起来不错，文本看起来也不错，但是元素被压缩到大约 40 像素，而不是它们设置的 180 像素宽度。它在 x 轴上也根本没有溢出。
我在这里做错了什么？
试试这个：
#cards-text-wrap {
background: #D9D9D9;
width: auto;
height: 300px;
margin: 230px 0 0 0;
text-align: center;
}
.text {
background: #D9D9D9;
margin: 10px 0 0 0;
text-align: center;
font-size: 2rem;
}
.scrollable-card {
min-width: 180px;
height: 210px;
background: white;
border-radius: 26px;
white-space: nowrap;
margin: 0 20px;
width: 100%;
}
.card-wrapper {
display: flex;
flex-wrap: nowrap;
height: 210px;
overflow-x: scroll;
width: auto;
margin-top: 10px;
}<body>
<div id="cards-text-wrap">
<h1 class="text">Some text here</h1>
<div class="card-wrapper">
<div class="scrollable-card"></div>
<div class="scrollable-card"></div>
<div class="scrollable-card"></div>
<div class="scrollable-card"></div>
<div class="scrollable-card"></div>
</div>
</div>
</body>