Why does the fxFlexFill not working as expected?

[wizzardz]

Bug, feature request, or proposal:

When fxFlexFill is applied to a component it should take the whole height of the parent, but it does not seems to be working.

What is the expected behavior?

The element should take the height of the parent.

What is the current behavior?

The element is taking the height of its contents (child elements).

What are the steps to reproduce?

Providing a StackBlitz (or similar) is the best way to get the team to see your issue.

Please find the demo of the issue here.
https://stackblitz.com/edit/fxflexfill-issue

• StackBlitz starter using latest npm nightly release:

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

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

Is there anything else we should know?

[CaerusKaru]

Demo leads to a 404

[wizzardz]

@CaerusKaru fixed the link issue

[CaerusKaru]

The problem is that on StackBlitz, the div containing the actual Angular app is not set to height: 100%. If you add #blitz-app { height: 100%; } to the styles.css file, you will see correct behavior. If you examine the CSS, you'll see that all of the elements are applying the correct inline CSS, but it's worthless because the containing element has a restricted height within the body.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}