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.

Solution

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;
}

Comments

[tao]

You seem to need CSS help. CSS doesn't care much what you use to generate the final markup. Right now you require someone who knows well both Angular 4 and CSS to answer your question. Also, they will need to test it by creating a minimal reproducible example. If you create it yourself, linking required resources to reproduce the issue, anyone with sufficient CSS knowledge could help by inspecting the result featured in the snippet, even if they didn't know a thing about Angular 4 and how it builds up that markup.