How to make Material-UI CardActions always stick to the bottom of parent

Question

The blue CardActions section of the 2nd Material-UI card is not staying at the bottom which makes the page looks not concise.

I already tried to set the height to 100% for CardContent but nothing has changed.

I created a sandbox for illustration of the problem:

https://codesandbox.io/s/happy-glitter-7vyep

I would like that the Material-UI CardAction stays always at the bottom of the container, no matter how many items I have in the CardContent.

Answer 1

you have to add following properties to .MuiCard-root

.MuiCard-root{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

Other Method is :

.MuiCard-root{
  display: flex;
  flex-direction: column;
}
.MuiCardActions-root{
   margin-top: auto;
}