mat-grid-list with a mat-card and mat-card-actions/mat-card-footer

Question

I have the following code, in angular 6 and material design:

<div class="grid-container">

  <h1 class="mat-h1">Candidatos</h1>

  <mat-grid-list cols="5" gutterSize="20px" class="list-candidatos">

    <mat-grid-tile *ngFor="let candidato of candidatos">

      <mat-card class="candidato-card">

        <mat-card-header>
          <mat-card-title>{{candidato.nome}}</mat-card-title>
        </mat-card-header>

        <mat-card-content>
          &nbsp;
        </mat-card-content>

        <mat-card-actions>
          <button mat-button>Edit</button>
        </mat-card-actions>

      </mat-card>

    </mat-grid-tile>

  </mat-grid-list>

</div>

And the css

.list-candidatos {
  width: 93%;
  margin: 20px auto;
  margin-top: 60px;
}

.candidato-card {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

But no matter what I change in the css I was not able to make the mat-card-actions or the mat-card-footer keep in the bottom of card. So:

1. The structure is right or is missing something?
2. If its right, how to put the mat-card-actions/mat-card-footer in the bottom of mat-grid-tile?

Answer 1

Try this in CSS , it will solve the footer issue

.mat-card{
  display:flex;
  flex-direction: column;
}

.mat-card-header {
  flex-shrink: 0;
}

.mat-card-content{
  flex-grow: 1;
  overflow: auto;
}