title: Angular material mat grid list not expanding
body: <p>I am new to the angular-material libary (and material design spec in general), I have used bootstrap for years, so am not sure I am implementing mat-grid-list correctly, but I have the follwing:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-card&gt;
  &lt;mat-grid-list cols="2"&gt;
      &lt;mat-grid-tile&gt;
          &lt;mat-grid-tile-header&gt;Clocked In&lt;/mat-grid-tile-header&gt;
          &lt;mat-list&gt;
              &lt;mat-list-item&gt; 
                  &lt;button  mat-raised-button color="warn"&gt;
                          {{user.firstName}} {{user.lastName}}
                  &lt;/button&gt;
              &lt;/mat-list-item&gt;
          &lt;/mat-list&gt;
      &lt;/mat-grid-tile&gt;
      &lt;mat-grid-tile&gt;
          &lt;mat-grid-tile-header&gt;Clocked Out&lt;/mat-grid-tile-header&gt;
          &lt;mat-list&gt;
              &lt;mat-list-item&gt; 
                  &lt;button mat-raised-button color="accent"&gt;
                      {{user.firstName}} {{user.lastName}}
                  &lt;/button&gt;
              &lt;/mat-list-item&gt;
          &lt;/mat-list&gt;
      &lt;/mat-grid-tile&gt;
  &lt;/mat-grid-list&gt;
  </code></pre>
  
  <p></p>
  
  <p>This is based off of the angular-material example, to which I have included a working stackblitz example: <a href="https://stackblitz.com/edit/angular-cccnjp?file=app%2Fsidenav-responsive-example.html" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-cccnjp?file=app%2Fsidenav-responsive-example.html</a></p>
  
  <p>As you can see, the buttons have been rendered inside the mat-grid-tile-header and the mat-card has not expanded to accomodate the content provided (as I would expect)</p>
  
  <p>EDIT: So, I did try using the rowHeight="fit" attribute on the mat-grid-list but this doesn't render any content, I would expect this to expand the height of mat-grid-list depending on content, but this is not working.</p>
  
  <p><a href="https://stackblitz.com/edit/angular-cccnjp-ylmzf9?file=app/sidenav-responsive-example.html" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-cccnjp-ylmzf9?file=app/sidenav-responsive-example.html</a></p>
  
  <p><strong>UPDATE:</strong> <em>ugly working solution</em> </p>
  
  <p>So I managed to acheive this with some (quite ugly) css...</p>
  
  
  
  <pre><code>&lt;mat-card class="height100p"&gt;
  &lt;mat-grid-list cols="2"&gt;
      &lt;mat-grid-tile class="mat-grid-tile-custom"&gt;
          &lt;mat-grid-tile-header&gt;Clocked In&lt;/mat-grid-tile-header&gt;
          &lt;mat-list class="custom-mat-list"&gt;
              &lt;mat-list-item&gt; 
                  &lt;button  mat-raised-button color="warn"&gt;
                          {{user.firstName}} {{user.lastName}}
                  &lt;/button&gt;
              &lt;/mat-list-item&gt;
          &lt;/mat-list&gt;
      &lt;/mat-grid-tile&gt;
      &lt;mat-grid-tile class="mat-grid-tile-custom"&gt;
          &lt;mat-grid-tile-header&gt;Clocked Out&lt;/mat-grid-tile-header&gt;
          &lt;mat-list class="custom-mat-list"&gt;
              &lt;mat-list-item&gt; 
                  &lt;button mat-raised-button color="accent"&gt;
                      {{user.firstName}} {{user.lastName}}
                  &lt;/button&gt;
              &lt;/mat-list-item&gt;
          &lt;/mat-list&gt;
      &lt;/mat-grid-tile&gt;
  &lt;/mat-grid-list&gt;
  </code></pre>
  
  
  
  <pre><code>.height100p {
      height: 100%;
  }
  .mat-grid-tile-custom {
      overflow: visible!important;
  }
  
  .custom-mat-list { /* this is bad! */
      padding-top: 50%!important;
  }
  
  .mat-grid-tile-custom .mat-figure {
      align-items: unset!important;
  }
  </code></pre>
  
  <p>As you can see, the glaring error/problem here is the .custom-mat-list with a padding-top of 50%, this will be different between browsers, although technically this works, I don't think its a long term solution, if anuone has any thoughts/improvements or suggestions I would be very grateful.</p>
  
  <p>Stackblitz example: <a href="https://stackblitz.com/edit/angular-cccnjp-3dieg1?file=app%2Fsidenav-responsive-example.css" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-cccnjp-3dieg1?file=app%2Fsidenav-responsive-example.css</a></p>