title: How to change height of Mat-Card element in angular material design component
body: <p>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 . </p>
  
  <pre><code>         &lt;div fxLayout="row"&gt;
            &lt;mat-card *ngFor="let section1 of sections" fxFlex="33" style="margin: 15px;"&gt;
                 &lt;mat-card-header&gt;
                      &lt;mat-card-title&gt;{{section1}}&lt;/mat-card-title&gt;
                 &lt;/mat-card-header&gt;
                 &lt;mat-card-content&gt;
                      &lt;form&gt;
                        &lt;!-----form data goes here ----&gt;
                      &lt;/form&gt;
  
                 &lt;/mat-card-content&gt;
  
           &lt;/mat-card&gt;
  
        &lt;/div&gt;
  </code></pre>
  
  <p>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? </p>
  
  <p><a href="https://i.stack.imgur.com/xVIsX.png" rel="noreferrer"><img src="https://i.stack.imgur.com/xVIsX.png" alt="Mat-card with same height due to *ngFor"></a></p>