Flex Item to have specific height even when empty content

Question

I am currently using angular flexbox for the below code.

I would like to make the middle flex item (div, to be more specific) to have a specific height, even when its content is empty.

The solution should involve using purely flex properties to give the height, unless it is not possible.

<div fxLayout="column"  style="height:100vh">
  <header style="background-color: lightblue;" >
        Header
  </header>
  <div style="background-color: orange;"  >

  </div>
  <footer style="background-color: yellow"> Footer </footer>
</div>

Answer 1

You can add fxFlex to it to give it an height, this should work because it is within a column div which has a fixed height (you can play around with the value within the fxFlex to suit your needs).

<div fxFlex="50" style="background-color: orange;">
</div>

You can also make use of fxFill on the same div to fill all available space:

<div fxFill style="background-color: orange;">
</div>

source: https://tburleson-layouts-demos.firebaseapp.com/#/docs