title: mat-card-content overflows angular material card
body: <p>Using angular material 8.2.0</p>
  
  <p>I have created a dashboard template from the <a href="https://material.angular.io/guide/schematics#dashboard-schematic" rel="nofollow noreferrer">angular material schematics</a>. This creates a number of mat-grid-tile within a mat-grid-list. In each tile there is a mat-card</p>
  
  <p>Now I am trying to fit put a google map and some charts.js into the content section of the cards that are generated.</p>
  
  <p>Since for both the map and the charts I need to specify the height of the container div, I was hoping that simply using <code>height:100%</code> would do it. However when using <code>height:100%</code> on <code>mat-card-content</code> it overflows the parent mat-card. </p>
  
  <p>A simple example demonstrating this is:</p>
  
  <p><a href="https://stackblitz.com/edit/angular-material-ucak6j" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-material-ucak6j</a></p>
  
  <p>Any hints into the issue or a potential workaround is appreciated.</p>