Angular Material Layout

HTML

<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-aria.js"></script>
<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<div ng-app="sandbox">

  <div layout="column" layout-fill>
     <md-toolbar>
       toolbar
     </md-toolbar>

     <div class="main">
        <div style="height:100%" layout-fill>
          <div flex layout="column" class="firstColumn">
            <div class="header1">
              first column header 1
            </div>
            <div class="header2">
              first column header 2
            </div>
            <div>
            first column content
            </div>
          </div>
          <div flex layout="column" class="secondColumn">
            <div class="header3">
             second column header 1
            </div>
            <div class="header4">
              second column header 2
            </div>
            <div>
            second column content:
            could be really really long, or really really short...
            needs a scrollbar if long, and for the background to still fill the page if not long.
            </div>
            
          </div>
        </div>
     </div>
  </div>
</div>

CSS

.main {
  height: calc(100vh-64px);
}

.md-toolbar {
  background-color: black;
  height: 64px;
}

.firstColumn {
  height: 200px;
  background-color:green;
}

.secondColumn {
  background-color:red;
}

.header1, .header3 {
  height: 64px;
}

.header2, .header4 {
  height: 28px;
}

JavaScript

angular.module('sandbox', ['ngMaterial']);