Angular 2 flex-layout height 100%

Question

Angular app using Material design and flex-layout. https://github.com/angular/flex-layout

I'm trying to create a simple page layout of 2-columns on top (left=fill, right=10%), followed by a single row on the bottom of the screen. The elements are still only filling just the vertical space required for the content. The only way I've found to do this is to manually set height to 100%. Is that how I have to do it? What is wrong with this html?

<div fxLayout="column">
  <div fxLayout="row" fxFlex="90%">
    <div fxFlex="80%" class="border">
      <p>Stuff is happening here</p>
    </div>
    <div fxFlex="20%" class="border">
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
      </ul>
    </div>
  </div>
  <div fxLayout="row" fxFlex="10%" class="border">
    <p>Bottom element</p>
  </div>
</div>

Result:

Answer 1

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

Answer 2

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.