Angular Material md-item-list css bug

i am trying to make the tutorial "https://github.com/angular/material-start/tree/master" 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?

Thanks Pat

screenshot

<html lang="en">
<head>
    <!-- Angular Material style sheet -->
    <link rel="stylesheet"
          href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
</head>
<body ng-app="BlankApp" layout="column" ng-cloak>
<!--
  Your HTML content here
-->

<!-- Wireframe Container #1 -->
<div flex layout="row">

    <!-- Container #3 -->
    <md-sidenav md-is-locked-open="true" class="md-whiteframe-z2">
        <md-list>
            <!-- List item #1 -->
            <md-list-item>
                <md-button>
                    <md-icon md-svg-src="./assets/svg/avatar-1.svg" class="avatar"></md-icon>
                    Lia Luogo
                </md-button>
            </md-list-item>

            <!-- List item #2 -->
            <md-list-item>
                <md-button>
                    <md-icon md-svg-src="./assets/svg/avatar-4.svg" class="avatar"></md-icon>
                    Lawrence Ray
                </md-button>
            </md-list-item>
        </md-list>
    </md-sidenav>

    <!-- Container #4 -->
    <md-content flex id="content">
        <!-- User details sample -->
        <md-icon md-svg-src="./assets/svg/avatar-1.svg" class="avatar"></md-icon>
        <h2>Lia Luogo</h2>
        <p>
            I love cheese...
        </p>
    </md-content>

</div>

<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>

<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>

<!-- Your application bootstrap  -->
<script type="text/javascript">
    /**
     * 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();
        };
    });
</script>

</body>
</html>

Solution

I updated the files that are loaded to match those of the Angular Material demos and the problem no longer exists.

If anyone is wondering how to replicate the problem, copy-paste the markup in the question into a file (test.html) and open the file in Chrome. The markup below will display correctly.

<html lang="en">
<head>
    <!-- Angular Material style sheet -->
    <link rel="stylesheet"
          href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc.5/angular-material.min.css">
</head>
<body ng-app="BlankApp" layout="column" ng-cloak>
<!--
  Your HTML content here
-->

<!-- Wireframe Container #1 -->
<div flex layout="row">

    <!-- Container #3 -->
    <md-sidenav md-is-locked-open="true" class="md-whiteframe-z2">
        <md-list>
            <!-- List item #1 -->
            <md-list-item>
                <md-button>
                    <md-icon md-svg-src="./assets/svg/avatar-1.svg" class="avatar"></md-icon>
                    Lia Luogo
                </md-button>
            </md-list-item>

            <!-- List item #2 -->
            <md-list-item>
                <md-button>
                    <md-icon md-svg-src="./assets/svg/avatar-4.svg" class="avatar"></md-icon>
                    Lawrence Ray
                </md-button>
            </md-list-item>
        </md-list>
    </md-sidenav>

    <!-- Container #4 -->
    <md-content flex id="content">
        <!-- User details sample -->
        <md-icon md-svg-src="./assets/svg/avatar-1.svg" class="avatar"></md-icon>
        <h2>Lia Luogo</h2>
        <p>
            I love cheese...
        </p>
    </md-content>

</div>

<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>

<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc.5/angular-material.min.js"></script>

<!-- Your application bootstrap  -->
<script type="text/javascript">
    /**
     * 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();
        };
    });
</script>

</body>
</html>