Angular Scrollable Mat-selection-list?

Answer :

Simple CSS

mat-selection-list {   max-height: 400px;   overflow: auto; } 

StackBlitz Demo

By setting custom CSS properties?

CSS for fancy scroll bar which only supports Chrome browsers:

.custom-scroll-bar{     height:70vh;     overflow-y:scroll;     overflow-x: hidden; }  .custom-scroll-bar::-webkit-scrollbar{     width: 5px; }  .custom-scroll-bar::-webkit-scrollbar-thumb{     background: rgba(0,0,0,.26); } 

For Firefox and Internet explorer just simply use:

.custom-scroll-bar{     height:70vh;     overflow-y:scroll; } 

HTML:

<mat-selection-list #shoes class="custom-scroll-bar">   <mat-list-option *ngFor="let shoe of typesOfShoes">     {{shoe}}   </mat-list-option> </mat-selection-list> 

StackBlitz Example

You can try with:

<mat-card fxFlex="33%">      <mat-selection-list [style.overflow]="'auto'" [style.height.px]="'300'">          <mat-list-item               *ngFor="let product of products"               [class.selected]="product === selectedproduct"               (click)="onSelect(product)">       </mat-list-item> </mat-selection-list>