Angular 2 flex-layout height 100%

I have just stumbled upon this question because I had a similar problem and I solved it in a more (I believe) consistent way by using the attribute fxFlexFill of the library FlexLayout, without manually adjusting the CSS properties. In your specific case you I would include the attribute fxFlexFill in the first div element as follows:

<div fxLayout="column" fxFlexFill>
    ...
</div>

I hope this helps. Massi

For someone looking to do this in Angular 7, here are the possible outputs using Flex. From the illustration is the question, I'm a tad confused about the required output. So I'm laying out all three scenarios, snapshots of the output and a stackblitz playground for you to try.

1st Case The bottom div is filled with the remaining height and the text is aligned to the bottom.

If that's what you are after, the only change required in the code is the bottom div section

<div fxFlex fxLayoutAlign="start end" class="bottom-div">
    BOTTOM ELEMENT: This div is filled and text is aligned in the end
</div>

2nd Case Similar to 1st. But the text is aligned in the center

<div fxFlex fxLayoutAlign="start center" class="bottom-div">
BOTTOM ELEMENT: This div is filled and text is in center
</div>

3rd Case The bottom div itself is aligned to the bottom and not filling up the remaining vertical space.

If that's what you are after, here is the change:

<div fxFlex="20" fxLayoutAlign="start center" class="bottom-div">
    BOTTOM ELEMENT: This div is just 20 and aligned to the bottom
</div>

Stackblitz Playground https://stackblitz.com/edit/stackoverflowcom-questions-41665737-angular-2-flex-layout-hei?file=src/app/app.component.html

Might help someone visiting it in later version of Angular.

Update Oct06, 2020: Revisited my answer today and realized that reference to Angular version seems irrelevant; the solution is moreover 'flex dependent'. I have removed the version of Angular from the answer.

Setting height to 100% is probably the way to go indeed. Height is dynamic so it will adapt to your content. In your case the content doesn't fill the page so that's a normal behavior.

What's wrong with this solution though ?