md-card-actions should align at the container's bottom

Playing with Puppy Love Demo, if card-content have different heights and card-container is defined as row:

.card-container {
  display: flex;
  flex-flow: row wrap;
}

then, the md-card-actions are not aligned at the bottom. Looking in the Angular Material Specs, I could not find what is the “right” behavior in this case, but action buttons not aligned at bottom looks pretty wired.

[Kyderman]

@spookyvale, I just changed the css for md-card to be using display:flex, with a margin-top on the card-actions

.item-card-container {
  display: flex;
  flex-direction: column;
  margin:20px;
}

md-card-actions {
  margin-top:auto;
}

[EladBezalel]

@willshowell thanks!

This is a quick fix

or you can come close with a simple override:

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

.mat-card-content {
  display: flex;
  flex: 1;
}

The problem is how card maintain flex internally… we might need to wrap the inner html of a card with a flex container to handle these situations… (as i did in the stackblitz) @mmalerba thoughts?