How to change height of Mat-Card element in angular material design component

Question

I have the following code in angular 5 app. which produces the sequence of mat-card as below image using *ngFor. But the height of all the mat-card is same as the height of first mat-card .

         <div fxLayout="row">
          <mat-card *ngFor="let section1 of sections" fxFlex="33" style="margin: 15px;">
               <mat-card-header>
                    <mat-card-title>{{section1}}</mat-card-title>
               </mat-card-header>
               <mat-card-content>
                    <form>
                      <!-----form data goes here ---->
                    </form>

               </mat-card-content>

         </mat-card>

      </div>

The result is list of mat card as below, but the problem is height of all mat-card is same as height of first mat card in the loop. Is there any way to make it dynamic based on the content it carries?

Answer 1

Set fxFlexAlign="stretch" to have all mat-card in same height.