Components: mat-card-footer not sticking to the bottom on cards with externally extended height

[raidenfreeman]

Bug, feature request, or proposal:

Does not anchor to bottom of card properly, when the card's height is set externally.

What is the expected behavior?

The footer should always be at the bottom, high enough to contain all the height of its contents.

What is the current behavior?

The footer is placed under the last element and does not stick to the bottom of the parent element.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-batbcz
1) Get the card example.
2) Swap the buttons from to
3) Set a greater height than necessary for the card (could be a flex container expanding the card, but in the example it's set inline)

What is the use-case or motivation for changing an existing behavior?

The footer doesn't do what it claims.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

At least chrome 66 , Angular Material v 5.2.5

[jelbourn]

Right now the footer just renders as the last element in the card, but doesn't necessarily stick to the bottom. Changing this would technically be a breaking change, since someone might be depending on the existing behavior.

[tqle]

Hi. Your issue is that you need to use the flex box display for the card. Add flex-grow: 1 to your inline css or to the main css for content and flex shrink 0 for the header. This should scale your card to any custom height while maintaining the header and footer correct or default heights. I've added overflow scrolling to the content to make up for the height difference, the custom height should not make the card bigger. The content should scale to the parent card height. Using the flex box model, flex grow works for the default height or any custom height. Just looked at your stack blitz example. Tried this css fix for both the 880px, 100%, 10rem, etc.... You can change the heights in the example.

The only edge case you will need to worry is about height like 0 or something really small, so not sure what you have as defaults.

I' forked the stack Blitz example and you can see the css changes. I moved the image inside the content, not sure why image should not be outside of content but my fix is with the image inside for now. Content should include images, videos, text,...unless there is s a specific material rule on why it should be outside. Hope this helps :)

Forked stack Blitz with my suggested fix.
https://stackblitz.com/edit/angular-batbcz-snrvtc?file=app%2Fcard-fancy-example.css

CSS code suggestion:
`
/* Change .mat-card to be display inline-flex. Make it flex column so header, content, footer has a
flex direction of column. /
.mat-card{
display:flex;/ <-- Add this /
flex-direction: column;/ <-- Add this */
}

/* Add flex-shrink to be 0 so the header should not be clipped or shrink if the parent card height changes /
.mat-card-header {
display: flex;
flex-direction: row;
flex-shrink: 0; / <-- Add this */
}

/* Make the card content to be flex grow factor of 1, this is going to scale to your inline height or custom height. Content should scroll within the card height and not expand the card's height. /
.mat-card-content{
flex-grow: 1;/ <-- Add this /
overflow: auto; / <-- Add this /
/ outline: 1px solid red; / / uncomment to see test outlines */
}
`

[alisarioglu]

In this case, the description "<mat-card-footer> Section anchored to the bottom of the card" on https://material.angular.io/components/card/overview is misleading and should be changed.

[DanielHabenicht]

I think this is also related to #661