How can I adjust the height of my mat-table so that it fills the remaining vertical space and any excess is scrollable?

Question

I've added an image below which better details the model of my webpage.

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.

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.

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.

We're making use of bootstrap, so the mat-card is contained inside of a col-8 class.

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?

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.

The issue here is that the height of the mat-card varies, so if the container holding the table is height: 100%, 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 height: 100% available width

Answer 1

Try this. As I wrote in the comments you can have your content container being display: flex; flex-direction: column, then you card would be flex: 1; min-height: 0; overflow: auto and you can then make your table: min-height: 100%.