Angular 7 Material Card max-height and scrollable

Question

I use a grid layout for my application. On the bottom left grid I'm using Material Cards. The cards have dynamic content which means that the height of the card is different. How do I set the maximum height of the cards, so that they don't get cut off at the end of the screen? And since the cards have a dynamic content, how do I make the cards scrollable?

Answer 1

add this to your css:

.mat-card {
  max-height: 100px;
  overflow-y: auto;
}

DEMO