Angular FlexLayout Cards same Layout

Question

I'm quite new to the subject and am currently in the first attempts of a project. So I hope you can help me :)

I am using a FlexLayout with mat-cards and the first three elements are working as expected. However, the last element has not the same heigh as the others and I'm not able to fix this.

Here is my code:

<div class="container" fxLayout="row wrap" fxLayoutGap="16px grid">
 <div fxFlex="20%" fxFlex.sm="100%" fxFlex.xs="100%">
  <ra-doughnutcard></ra-doughnutcard>
 </div>
 <div fxFlex="20%" fxFlex.sm="100%" fxFlex.xs="100%">
  <ra-doughnutcard></ra-doughnutcard>
 </div>
 <div fxFlex="40%" fxFlex.sm="100%" fxFlex.xs="100%">
  <ra-linecard></ra-linecard>
 </div>
 <div fxFlex="20%" fxFlex.sm="100%" fxFlex.xs="100%">
  <ra-listcard></ra-listcard>
 </div>
</div>

Listcard-Component-html:

<mat-card class="mat-elevation-z5">
 <mat-card-title>
  <h5>Text</h5>
 </mat-card-title>
 <mat-card-content>
  <mat-list-item *ngFor="let item of items"> {{ item }} </mat-list-item>
 </mat-card-content>
</mat-card>

Without the Tag ra-listcard it seems working. I tried also the stretch aligment of FlexLayout without success. I think ra-listcard as the parent container is setting the wrong height, how can I fix this issue?

In CSS is only h5 size and text aligment set.

Answer 1

With the help of Clemens Sums answer I have understood how to set properties on parent containers and I found a solution for my issue:

:host {
 display: flex;
 height: 100%;
}

mat-card {
 width: 100%;
}

Answer 2

My guess would be to declare the following in the ra-listcard components styles:

:host {
  display: block;
}

mat-card {
    height: 100%;
}

See https://angular-9-material-starter-5k4ugj.stackblitz.io for a simplified version.

Answer 3

You can add fxFlex in your tags so that they take up all the available space, like this:

<div class="container" fxLayout="row wrap" fxLayoutGap="16px grid">
 <div fxFlex="20%" fxFlex.sm="100%" fxFlex.xs="100%">
  <ra-doughnutcard fxFlex></ra-doughnutcard>
 </div>
 <div fxFlex="20%" fxFlex.sm="100%" fxFlex.xs="100%">
  <ra-doughnutcard fxFlex></ra-doughnutcard>
 </div>
 <div fxFlex="40%" fxFlex.sm="100%" fxFlex.xs="100%">
  <ra-linecard fxFlex></ra-linecard>
 </div>
 <div fxFlex="20%" fxFlex.sm="100%" fxFlex.xs="100%">
  <ra-listcard fxFlex></ra-listcard>
 </div>
</div>