Angular flex layout grow parameter doesn't expand row to maximum available space

Question

I want to create the following table, where the Div 3 grows to to complete the available height.

I am using the following code, without success:

<div fxFlex fxLayout="column">
  <div fxFlex="nogrow">Div 1</div>
  <div fxFlex="nogrow">Div 2</div>
  <div fxFlex="grow">Div 3</div>
  <div fxFlex="nogrow">Div 4</div>
</div>

that produces

It works fine for fxLayout="row", but not for column layout. Does anybody know what I am missing? Thanks

EDIT:

css is

 div {
   border: 1px solid black
 }

Answer 1

The parent div containing the 4 divs doesn't seem to have any height set explicitly in CSS. So it simply fits the inner content and doesnt let the inner divs grow. What you could try to do is set some height to the parent div and see if that works. It worked for me!