title: Angular Material md-item-list css bug
body: <p>i am trying to make the tutorial "<a href="https://github.com/angular/material-start/tree/master" rel="nofollow">https://github.com/angular/material-start/tree/master</a>" but i have a problem with the md-list and md-list-item directive. i posted my code in the bottom. The problem i have is, that the space between the md-list-items are to as big as the site is height. has anyone a idea why that happens or what i am doing wrong here?</p>
  
  <p>Thanks 
  Pat</p>
  
  <p><a href="http://i.stack.imgur.com/e5hra.png" rel="nofollow">screenshot</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;!-- Angular Material style sheet --&gt;
      &lt;link rel="stylesheet"
            href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css"&gt;
  &lt;/head&gt;
  &lt;body ng-app="BlankApp" layout="column" ng-cloak&gt;
  &lt;!--
    Your HTML content here
  --&gt;
  
  &lt;!-- Wireframe Container #1 --&gt;
  &lt;div flex layout="row"&gt;
  
      &lt;!-- Container #3 --&gt;
      &lt;md-sidenav md-is-locked-open="true" class="md-whiteframe-z2"&gt;
          &lt;md-list&gt;
              &lt;!-- List item #1 --&gt;
              &lt;md-list-item&gt;
                  &lt;md-button&gt;
                      &lt;md-icon md-svg-src="./assets/svg/avatar-1.svg" class="avatar"&gt;&lt;/md-icon&gt;
                      Lia Luogo
                  &lt;/md-button&gt;
              &lt;/md-list-item&gt;
  
              &lt;!-- List item #2 --&gt;
              &lt;md-list-item&gt;
                  &lt;md-button&gt;
                      &lt;md-icon md-svg-src="./assets/svg/avatar-4.svg" class="avatar"&gt;&lt;/md-icon&gt;
                      Lawrence Ray
                  &lt;/md-button&gt;
              &lt;/md-list-item&gt;
          &lt;/md-list&gt;
      &lt;/md-sidenav&gt;
  
      &lt;!-- Container #4 --&gt;
      &lt;md-content flex id="content"&gt;
          &lt;!-- User details sample --&gt;
          &lt;md-icon md-svg-src="./assets/svg/avatar-1.svg" class="avatar"&gt;&lt;/md-icon&gt;
          &lt;h2&gt;Lia Luogo&lt;/h2&gt;
          &lt;p&gt;
              I love cheese...
          &lt;/p&gt;
      &lt;/md-content&gt;
  
  &lt;/div&gt;
  
  &lt;!-- Angular Material requires Angular.js Libraries --&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- Angular Material Library --&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- Your application bootstrap  --&gt;
  &lt;script type="text/javascript"&gt;
      /**
       * You must include the dependency on 'ngMaterial'
       */
      var app = angular.module('BlankApp', ['ngMaterial']);
      app.controller('MyController', function ($scope, $mdSidenav) {
          $scope.openLeftMenu = function () {
              $mdSidenav('left').toggle();
          };
      });
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>