Angular Material: Each md-list-item takes full pag

问题:

I'm trying to create angular material sidenav with list of menu items. When Im running the code on local machine, Each md-list-items takes fullpage width and sidenav have long scroll bar.

But When I run the same code on codepen.io, It displayed correctly.

<section layout="row" ng-controller="AppCtrl">
    <md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" >
        <md-toolbar ng-controller="LeftCtrl">
            <div class="md-toolbar-tools">
                <h1>Sidenav Right</h1>
                <span flex></span>
                <md-button class="md-icon-bitton" aria-label="Close Menu" ng-click="close()">
                    <md-tooltip md-direction="right">Close this menu</md-tooltip>
                    <md-icon md-font-icon="material-icons">close</md-icon>
                </md-button>
            </div>
        </md-toolbar>
        <md-content flex role="navigation">
             <md-list>
                <md-list-item>
                    <md-button>First Option</md-button>
                </md-list-item>
                <md-list-item>
                    <md-button>First Option</md-button>
                </md-list-item>
                <md-list-item>
                    <md-button>First Option</md-button>
                </md-list-item>
            </md-list>
        </md-content>
    </md-sidenav>

    <md-content flex>
        <md-toolbar>
            <div class="md-toolbar-tools">
                <md-button class="md-icon-button" aria-label="Settings" ng-click="toggleLeft()" ng-hide="isOpenLeft()">
                    <md-icon md-font-icon="material-icons">menu</md-icon>
                </md-button>
                <h2>
                    <span>Application Title</span>
                </h2>
            </div>
        </md-toolbar>
    </md-content>
</section>

Here is the codepen:http://codepen.io/nhere/pen/yOwJxE

回答1:

Try to use the following structure

<md-list>
  <md-item>
    <md-item-content>
       [Content Here]
    </md-item-content>             
  </md-item>
</md-list>