Fill Angular Material 2 tab with flex-layout

I'm attempting to create a tabbed app using Angular Material 2, and flex-layout. I can't figure out how to get the content of the tab to expand to fill the screen.

This is what I see:

My code for the layout is as follows, and includes a toolbar and footer.

<div fxFlex fxLayout="column">

  <md-toolbar color="primary">
    Toolbar
  </md-toolbar>

  <md-tab-group>

    <md-tab label="Tab 1">
      <div fxFlex fxLayout="column" style="background-color:lightblue;padding:10px">
        <div style="background:lightgreen;">This should stay as it is</div>
        <div fxFlex style="background:lightgray;">This should expand so it fills the majorty of the screen</div>
      </div>
    </md-tab>

    <md-tab label="Tab 2">
      <h1>some content page 2</h1>
    </md-tab>

    <md-tab label="Tab 3">
      <h1>some content page 3</h1>
    </md-tab>

  </md-tab-group>

  <div>Footer</div>
</div>

I have placing fxFlex at various places and creating extra div containers, all without any success. Any ideas what I should do?

Plunkr created here: http://plnkr.co/edit/eU413bX36I6aZFRTs6cg?p=preview