title: how to make angular material card to take available vertical space and make it's content scrollable
body: <p>I'm trying to make a material-card (mat-card) take available space on the screen and then make its content (mat-card-content) scrollable because the items inside the content take more space than the available.</p>
  
  <p>I'd tried with the following CSS but this only is a partial solution since I'm using a fixed height to the content.</p>
  
  <pre><code>.mat-card-content {
      height: 620px;
      overflow: auto;
    }
  </code></pre>
  
  <p>The problem here are the different screen resolutions so in some it would look fine but other will have a lot of empty space that could be used.</p>