title: angular material md-card with scrollable content
body: <p>I have an md-card that consists of an md-header and scrollable md-card-content.  As the scrollable content gets taller, the header gets smaller and smaller for some reason.  The width of the card can change and the header can possibly wrap around to 2 or 3 lines so a min-height on the header isn't a solution.  The problem exists in latest IE and Chrome, not FF.</p>
  
  <p>Click The "Add 5 Rows" button a few times to see the header shrink</p>
  
  <p><a href="http://plnkr.co/edit/wgBKnXh7FSn1VLO8mST0?p=preview" rel="nofollow">http://plnkr.co/edit/wgBKnXh7FSn1VLO8mST0?p=preview</a></p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;angular material&lt;/title&gt;
          &lt;link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css"&gt;
      &lt;/head&gt;
      &lt;body ng-app="app" ng-controller="ctrl" layout="column" layout-fill&gt;
          &lt;md-card style="height: 200px; width: 500px"&gt;
              &lt;md-card-header style="border-bottom: 1px solid grey"&gt;
                  &lt;md-card-header-text&gt;
                      &lt;span class="md-title"&gt;Long Header Long Header Long Header Long Header Long Header Long Header Long Header Long Header &lt;/span&gt;
                  &lt;/md-card-header-text&gt;
              &lt;/md-card-header&gt;
              &lt;md-content-card style="overflow-y: auto" &gt;
                  &lt;ul&gt;
                      &lt;li ng-repeat="x in getArray() track by $index"&gt;&lt;/li&gt;
                  &lt;/ul&gt;
  
              &lt;/md-content-card&gt;
          &lt;/md-card&gt;
          &lt;button style="width: 200px" ng-click="addRows()"&gt;
              Add 5 Rows
          &lt;/button&gt;
          &lt;!-- Angular Material Dependencies --&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"&gt;&lt;/script&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-animate.js"&gt;&lt;/script&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-aria.js"&gt;&lt;/script&gt;
          &lt;!-- Angular Material Javascript using RawGit to load directly from `bower-material/master` --&gt;
          &lt;script src="https://rawgit.com/angular/bower-material/master/angular-material.js"&gt;&lt;/script&gt;
          &lt;script&gt;
              var app = angular.module('app', ['ngMaterial']);
  
              app.controller("ctrl", function($scope) {
                  $scope.rows = 0;
                  $scope.addRows = function() {
                      $scope.rows += 5;
                  };
                  $scope.getArray = function() {
                      return new Array($scope.rows);
                  };
              });
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;  
  </code></pre>