layout question (flexgrid)?

[kaisch]

<p-panel class="page">

<p-header>MyHeader</p-header>

<div class="workarea">
<router-outlet></router-outlet>
</div>

<p-footer>MyFooter</p-footer>

</p-panel>

How can this panel be styled that the workarea consumes all available space in a flexible way, even if the browser is resized? So the footer should be (sticky) in the very bottom of the browser window. The workarea should go from header to bottom. Can it be done with flexgrid?

Thanks for any help in advance.
Kai