I am creating an app in ionic, I have a tab that shows a total of 7 cards but I want them to be displayed as horizontal scroll that only 4 can be seen and the others when scrolling, if the 4 are shown but the others do not because the scroll does not work.

actually I have this in my code, according to what I have seen that with overflow-x: auto it should work but it hasn’t worked for me.

My html:

<ion-header [translucent]="true">
  <ion-toolbar class="container">
   <!--  <ion-title>HOY</ion-title> -->
    <h2 class="hoy">HOY</h2>
    <h1 class="dia">{{day}}</h1>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <!-- <ion-title size="large">plan</ion-title> -->
    </ion-toolbar>
  </ion-header>

 


  <div class="cards-container">
    <ion-card *ngFor="let daycard of days" class="cards">
        <ion-card-content class="card-content">
            <div class="image-day">
                <img src="{{ daycard.image }}" alt="">
            </div>
        </ion-card-content>
    </ion-card>
</div>

  
  <app-maintabs></app-maintabs>
</ion-content>

My 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;
                }
            }
        }
    }
}```