Моя горизонтальная прокрутка видна, но не работает ⇐ CSS

[Anonymous]

Я создаю приложение в ionic, у меня есть вкладка, на которой отображаются в общей сложности 7 карточек, но я хочу, чтобы они отображались в виде горизонтальной прокрутки, чтобы можно было увидеть только 4, а остальные - при прокрутке, если 4 отображаются, но остальные нет, потому что прокрутка не работает.
на самом деле у меня это есть в моем коде, согласно тому, что я видел с помощью overflow-x: auto, это должно работать, но не работает. Мне это помогло.
Мой HTML:



HOY
{{day}}























Мой scss:
.cards-container {
max-width: 100%;
display: flex;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
background-color: red;
padding: 10px;
gap: 10px;
-webkit-overflow-scrolling: touch;

.cards {
min-width: 25%;
background-color: blue;
scroll-snap-align: start;

.card-content {
width: 100%;

.image-day {
width: 100%;
height: 200px;

img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
}
}```


Подробнее здесь: https://stackoverflow.com/questions/792 ... s-not-work