Я пытаюсь создать карусель продуктов, которые частично находятся за пределами экрана и могут быть прокручены, чтобы имитировать компонент мобильного устройства.
Полоса прокрутки не доходит до конца продукта- карусель, но если я удалю переполнение, скрытое от класса карты, я вижу, что в нижней части родительского div есть полоса прокрутки, которая будет действовать правильно. Я хотел бы переместить это поведение в карусель.
Что мне нужно сделать, чтобы увидеть правильную полосу прокрутки под каруселью, а не в родительском div? Прокрутка родительского div приводит к отображению фона, я просто хочу, чтобы продукты скользили влево / вправо.
Полоса прокрутки без учета переполнения
Карусель имеет правильную ширину
После удаления переполнения с карт родителя, правильное поведение показано, но для родителя (см. небольшую полосу прокрутки внизу)
HTML
<div class="cards">
<div class="product-carousel">
<div class="card product">
<img class="home product-image" src="assets/product1.jpg"></img>
<div>
...
</div>
</div>
<div class="card product">
<img class="home product-image" src="assets/product2.jpg"></img>
<div>
...
</div>
</div>
<div class="card product">
<img class="home product-image" src="assets/product3.jpg"></img>
<div>
...
</div>
</div>
</div>
</div>
CSS
.cards {
/* overflow: hidden; */
overflow-y: auto;
height: 525px;
}
.product-carousel {
display: flex;
width: 400px;
height: 175px;
overflow: hidden;
overflow-x: scroll;
position: relative;
}
.product-carousel > .card.product{
width: 120px;
height: 160px;
justify-content: space-between;
margin-left: 10px;
position:relative;
text-align: center;
}