Create a horizontal scrollable “slider” with angular 9 and material

Question

we have the following component

<div layout="row">

<div *ngFor="let a of cardsArray">
    <mat-card class="card-card">  
        <mat-card-header>
            <div mat-card-avatar class="example-header-image"></div>
            <mat-card-title>IT29TB92881102020233</mat-card-title>
            <mat-card-subtitle>Deposit</mat-card-subtitle>
        </mat-card-header>

        <mat-card-content>
        <p>
            Valid thru <b>02/23</b>
        </p>
        </mat-card-content>
        <mat-card-actions>
            <button mat-button><mat-icon>list_alt</mat-icon>See Statement</button>
            <button mat-button><mat-icon>share</mat-icon>Copy Requisites</button>
        </mat-card-actions>
    </mat-card>
</div>
</div>

.card-card {
    max-width: 320px;
}


div[layout="row"] {
    overflow: auto;
}

It displays a list of "cards" verically. How should I create a horizontally scollable list of "cards" and keep it responsive yet?

Thanks

Answer 1

Thanks, actually the "issue" was in css, but okay, might be useful for angular starters...

.card-card {
    max-width: 320px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 5px;
    margin-left: 5px;

}


div[layout="row"] {
    overflow-x: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;


}