angular 6. flexlayout colum does not acquire 100% of the height of the screen

I'm trying to make the item1 occupy 50% of the height of the screen, and that item 2 occupy the other remaining 50% of the screen height, if this works, all the red background will be hidden but it is not.

<div fxLayout="column" style="height: 100%; background-color: red">
  <div fxFlex="50" style="background-color: blue">Item 1</div>  
  <div fxFlex="50" style="background-color: yellow">Item 2</div>  
</div>

This is what I get:

And this is what I want:

It's a responsive development, so I can not get pixels, I need to be with procentajes.

Can someone correct my code?

Thank you very much.

Greetings,