Angular Material: Jedes md-list-item nimmt volle Seitenbreite und Sideav haben lange scrollbar

Question

Ich versuche, eckigen Material sidenav mit Liste der Menüpunkte zu erstellen. Wenn ich den Code auf dem lokalen Rechner starte, nimmt jede md-list-items die volle Seitenbreite und sidenav hat eine lange Bildlaufleiste.

Aber wenn ich den gleichen Code auf codepen.io laufen, angezeigt Es richtig. Hier

<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> 

ist die codepen: http://codepen.io/nhere/pen/yOwJxE

Answer 1

Versuchen Sie, die folgende Struktur verwenden

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