how to make angular material card to take available vertical space and make it's content scrollable

Question

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.

I'd tried with the following CSS but this only is a partial solution since I'm using a fixed height to the content.

.mat-card-content {
    height: 620px;
    overflow: auto;
  }

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.

Answer 1

So this is what I did to solve it:

.mat-card {
  height: 90% !important;
  position: relative;
  overflow: hidden;
}

.mat-card-content {
  max-height: 100%;
  position: absolute;
  overflow: auto;
}

This way my mat-card will take 90% of the available space and then the content will take 100% of the available space of the mat-card. The key here is setting the mat-card position to relative and the mat-card-content position to absolute.