title: How can I adjust the height of my mat-table so that it fills the remaining vertical space and any excess is scrollable?
body: <p>I've added an image below which better details the model of my webpage.</p>
  
  <p>I have a page that is a part of my Angular application. Within the application I have a mat-card, and within that card is a mat-table which may display a long list of data.</p>
  
  <p>The list of data sometimes causes the height of the mat-card to be extended past the lower boundary of the page, and since the page isn't scrollable there is an amount of rows that will be unaccessible by the user. </p>
  
  <p>I want to be able to fix the size of the mat-card to be the height of the page minus the height of the header, so that the mat-card fills all of the remaining vertical space on the page. </p>
  
  <p>We're making use of bootstrap, so the mat-card is contained inside of a col-8 class.</p>
  
  <p>Is there a way that I can set the height of the card to be the remaining height on the page, and then cause any overflow within the body of the table to be scrollable? </p>
  
  <p>I've attempted to set overflow-y on the mat-table to scroll, but all that happens is the scrollbar appears but doesn't offer the ability to actually scroll.</p>
  
  <p>The issue here is that the height of the mat-card varies, so if the container holding the table is <code>height: 100%</code>, it'll take up as much height as it requires to display the full length of the table. I need to force the card height to only take up the visible available height, and not the height it needs to display the table. Something like <code>height: 100% available width</code></p>
  
  <p><a href="https://i.stack.imgur.com/BE3di.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BE3di.png" alt="enter image description here"></a></p>