mat-card-content overflows angular material card

Question

Using angular material 8.2.0

I have created a dashboard template from the angular material schematics. This creates a number of mat-grid-tile within a mat-grid-list. In each tile there is a mat-card

Now I am trying to fit put a google map and some charts.js into the content section of the cards that are generated.

Since for both the map and the charts I need to specify the height of the container div, I was hoping that simply using height:100% would do it. However when using height:100% on mat-card-content it overflows the parent mat-card.

A simple example demonstrating this is:

https://stackblitz.com/edit/angular-material-ucak6j

Any hints into the issue or a potential workaround is appreciated.

Answer 1

When you use height: 100% on an element inside a block element, it uses the parent element's height. But this parent element is the mat-card which also contains the mat-card-header so you need to leave room for that. The easiest way to fix that is to use a flexbox layout on the mat-card:

.dashboard-card-content {
  height: 100%;
  background-color: red;
}

.dashboard-card {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
}