Prevent collapse of flexbox div in Angular Material

I'm developing a AngularJS (v1.5) application using Angular Material and I'm stuck with the implementation of the layout. This is basically a fixed-height header, followed by variable-height content, followed by a fixed-height footer. The complete page should scroll (including the header) and the footer should be pushed to the bottom of the window when there is not enough content to fill the space between header and footer.

I've created a pen with the code I've got so far (replaced components with div's and introduced all the intermediate div's inserted by Angular) but when I decrease the height of the window, the content is collapsed to a height of zero instead of maintaining the height of the content and showing a scrollbar.

The problem is probably with the .main CSS class but I cannot figure out what I should be putting there.

The HTML:

<body ng-app="app">
  <!-- ui-view div -->
  <div layout="column" layout-fill>
    <!-- component div -->
    <div layout-fill>
      <!-- my own div around the page content -->
      <div layout="column" layout-fill>
        <!-- header component div -->
        <div flex="none">
          <header flex="none">
            <md-toolbar>
              <div class="container">
                <div class="md-toolbar-tools" layout="row" layout-align="center center">
                  <div flex></div>
                  <h1>HEADER</h1>
                  <div flex></div>
                </div>
              </div>
            </md-toolbar>
          </header>
        </div>
        <!-- content div -->
        <div flex class="container main">
          <h2>CONTENT</h2>
        </div>
        <!-- footer component div -->
        <div flex="none">
          <footer flex="none">
            <md-toolbar>
              <div class="container">
                <div class="md-toolbar-tools" layout="row" layout-align="center center">
                  <div flex></div>
                  <h1>FOOTER</h1>
                  <div flex></div>
                </div>
              </div>
            </md-toolbar>
          </footer>
        </div>
      </div>
    </div>
  </div>
</body>

The CSS:

header, footer {
  md-toolbar {
    height: 100px;
    min-height: 100px;
    background-color: #C8C8C8;

    .md-toolbar-tools {
      height: 100px;
      min-height: 100px;
    }
  }
}

.container {
  width: 600px;
  margin: 0 auto;
}

.main {
  background-color: #E8E8E8;
}

And the JavaScript:

angular.module("app", ['ngMaterial']);

The pen: http://codepen.io/kdbruin/pen/ZLwmvW

Solution

You can use flex="grow" with min-height on container to achieve the desired result.

Here is the Code

<div layout="column" flex="grow" style='background-color:green'>
<md-toolbar>
  <div flex="10">
    <div class="md-toolbar-tools" layout="row" layout-align="center center">
      <div flex></div>
      <h1>HEADER</h1>
      <div flex></div>
    </div>
  </div>
</md-toolbar>
<div flex="grow" style='background-color:pink; min-height:1000px'>
  <div ng-repeat="no in [0,1,2,3,4,5,6,7,8,9]">
    <h2>CONTENT - {{no}}</h2>
  </div>
</div>
<div flex="10" style='background-color:blue'>
  <div flex></div>
  <h1>FOOTER</h1>
  <div flex></div>
</div>

Here is the working Codepen.