Flex item won't become scrollable

Question

This is a flex column. On top, it has a toolbar of fixed height. The comes a content area that will take up the available vertical space. Its contents should be scrollable. Then comes a footer of fixed height.

My problem: the content area doesn't become scrollable. Instead, the whole page scrolls (losing the toolbar, side nav bar, hiding the footer).

See this plunk: https://plnkr.co/edit/YrYkWpoubOZSqeA4cuHo?p=preview

Just resize the window. Toolbar & footer should remain visible even if the contents are overflowing.

html

<mat-toolbar>

  <div class="toolbar-controls">
    Fancy toolbar
    <i class="material-icons">face</i>
  </div>

</mat-toolbar>

<div class="page-contents">

  <!--router-outlet name="main-content"></router-outlet-->
  <div class="scrollable">
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
  </div>

</div>

<div class="footer">
  Nice footer comes here
</div>

scss

// The main column
mat-sidenav-content{

  // Take up the rest of the horizontal space
  flex: 1 1 100%;

  // Contents will extend as needed and will stack vertically
  display: flex;
  flex-direction: column;

  // Top toolbar
  mat-toolbar{

    // Don't resize
    flex: 0 0 inherit;

    .toolbar-controls{
      flex: 0 0 200px;
      margin-left: auto;
    }
  }

  // Content should be scrollable in case it overflow
  .page-contents{

    // Grow, shrink if needed, but take all available space
    flex: 1 1 100%;

    display: flex;
    flex-direction: column;

    overflow-y: scroll;
    overflow-x: hidden;

    background-color: RED!important;

    .scrollable {
      overflow: auto;
      background-color: GREEN!important;
      margin-bottom: 32px;
    }
  }

  > .footer{
    flex: 0 0 40px;
    background-color: BLUE!important;
  }

}

Images: