Angular 4 - how to make a mat-card fill entire parent component area

Question

I have a mat-grid-tile (parent) which contains a component app-window (child), which contains a mat-card at its root.

The app-window fills the mat-grid-tile as desired and is center-aligned both vertically and horizontally. Now I want the app-window's mat-card to do the same so that I can have a grid of equally spaced mat-cards.

How can I get the mat-card contained within app-window to fill the entire app-window? I have tried some ideas but none were successful; more details below.

StackBlitz example

Component HTML:

<mat-grid-list cols="3" rowHeight="4:3">
  <mat-grid-tile>
    <app-window></app-window>
  </mat-grid-tile>
</mat-grid-list>

Component CSS:

app-window {
  width: calc(100% - 10px);
  height: calc(100% - 10px);
}

Attempted solutions and their results:

• Setting the app-window's mat-card's width to a width and height of 100%. This makes the mat-card slightly larger than the mat-grid-tile that contains it. The desired behaviour would have been to match the size of the app-window.
• Not assigning any extra CSS properties to the mat-card. As a result, the mat-card occupies the app-window's entire width but is only as tall as its content. I want it to always be the same height as the app-window.
• Assigning the property flex-grow: 1; to the mat-card. Based on my understanding, this should make the mat-card fill the entire space of the app-window, i.e. its parent container. However, there is no effect and the result is the same as the second solution's.

Answer 1

Hope you have figured this out by now but I'll provide this solution to others who might be seeing similar issues.

The reason height:100%; extends past the parent container is the mat-card box-sizing property is content-box by default. If you set it to border-box it will subtract the padding while determining the size to fill the parent.

The following should work for you:

app-window mat-card{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}