Adding ripple to mat-card without the card expanding on click/touch

Question

Im trying to add a ripple effect to a card using angular material. The ripple effect works the way it supposed except that it expands the hight of the card when the effect is active. How can I stop the card from expanding?

<mat-card mat-ripple>
  <mat-card-content>This is content</mat-card-content>
</mat-card>

Stackblitz that demonstrates the behaviour

Answer 1

If you add the footer element (with or without content) you won't need additional CSS and this will lock the height when activating the ripple effect.

<mat-card mat-ripple>
  <mat-card-content>This is content</mat-card-content>
  <mat-card-footer></mat-card-footer>
</mat-card>

Answer 2

Use a div -Tag inside of mat-card -Tag. This Fix my issue.