@angular/flex-layout causing annoying scrollbar in angular 11

Question

First time using @angular/flex-layout tried it on my new project. By showing mat-card in a for loop inside the flex-container. It adds up an annoying scrollbar I don't want to use fxFlex="column" on xs devices, I think fxLayoutGap="20px grid" is causing the issue. Here is stackblitz link: here

How can I fix this problem?

Answer 1

add fxFlexFill to the container

<div fxLayout="row wrap" fxLayoutGap="20px grid"
  fxFlexFill
   fxLayoutAlign="center center">