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.

score 3 · Accepted Answer · answered Jan 03 '20 at 18:53

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.

score 0 · Answer 2 · 2020-01-03T18:57:01.370

0

For scrollable content, try adding the overflow-y property on your element, and setting it to scroll. This causes all vertical overflow on it to be scrollable.

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

Source.

For stretching the card to full height, try using height: 100% on the mat-card class.

mat-card {
  height: 100%;
}

edited Jan 03 '20 at 18:57

answered Jan 03 '20 at 18:44

Hey, maybe it was something confusing on the problem or the description, but I can get the scrollable content, the thing is I need it to be dynamically and not a fixed height. But thanks for taking the time @Kurisu – wrabarias Jan 03 '20 at 18:50
Oh, my bad. If I understand correctly, you want it to always occupy the full height of your page? – Jan 03 '20 at 18:53
See if the edit above helps, otherwise it'd be helpful if you posted your HTML syntax to have a better look at it. – Jan 03 '20 at 18:57

score 0 · Answer 3 · answered Jan 03 '20 at 19:18

This can likely be achieved with flexbox.

Simplest way is to do something like this: if you give your card a wrapper with

.card-wrapper {
  display: flex;
  overflow: hidden;
}

Then you should be able to give your card a flex grow and shrink

.card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
}
.mat-card-content {
  flex: 1 1 auto;
  overflow: auto;
}

Here's a stackblitz for an example. Check out what I've added to both the styles.css and the app.component.css. You can see that the card's bound always take up the whole app's height and width. If you resize the window it'll either scroll or not. https://stackblitz.com/edit/angular-smp5qu

Depending on your application, you may have to tweak some of these styles to get it working right with any other element you have on the page.

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

3 Answers3