Flex-layout with Angular 6 vertical 50-50 height

Question

I'm using FlexLayoutModule with Angular6 and trying to achieve two div's of both 50% height vertically. I have tried this particular code but both are not occupying 50% height of parent.

<div style="min-height:50px">I'm header</div>
<div style="height:100%">
<div fxLayout="column" fxLayoutGap="12px">
    <div fxFlex="50%" style="background:#5896FF">
        <h1>I should occupy 50% height of my parent</h1>
    </div>
    <div fxFlex="50%" style="background:#525252">
        <h1>I should occupy 50% height of my parent</h1>
    </div>
</div>

Link of so far working example

This is what I'm trying to achieve

Answer 1

I made a couple of changes to your example to have two div's split the screen vertically 50 / 50.

<div style="height:100%" fxLayout="column">
    <div style="min-height:50px">I'm header</div>
    <div fxLayout="column" fxLayoutGap="12px" fxFlex>
        <div fxFlex style="background:#5896FF">
            <h1>I should occupy 50% height of my parent</h1>
        </div>
        <div fxFlex style="background:#525252">
            <h1>I should occupy 50% height of my parent</h1>
        </div>
    </div>
</div>

You also need to update styles.css:

html, body {
    height: 100%;
    margin: 0;
}

Here is a link to the updated example.