Google Material - Scroll div mit der eingestellten Höhe

Question

Ich habe ein div von einer eingestellten Höhe. Ich setze das Div mit einer Spalte in Google Material und dann Zeilen des Inhalts hinzufügen.

Mein Problem ist folgendes:

Wenn ich eine feste Höhe haben nicht die div-Container gesetzt, dann wird das div nicht scrollbaren ist - der Überlauf Inhalt wird einfach nicht angezeigt.

Wenn ich den Container auf eine feste Höhe festlegen, werden die Zeilen zusammen geschoben, um in diesen Raum zu passen, und die Formatierung geht verloren.

Dies scheint wie etwas, das sollte sehr einfach zu tun sein. Ich sehe Antworten, die sagen, dass Sie MD-Content-Elemente einbetten sollten, die ich in dem Code unten habe. Das ist von den Materialunterlagen verpönt und verständlich. Jede Hilfe wird geschätzt.

<md-content> 

    <md-content> 

     <div layout="column" flex="100"> 

      <div layout="row" flex="100" layout-margin > 

       row content 

      </div> 

      <div layout="row" flex="100" layout-margin > 

       row content 

      </div> 

      <div layout="row" flex="100" layout-margin > 

       row content 

      </div> 

     </div> 

    </md-content> 

</md-content> 

Answer 1

Sie müssen nur flex="none" für die inneren div s einstellen - CodePen

Vom docs

Markup

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp"> 
    <md-content> 
     Scrolling: 
     <md-content> 
      <div layout="column" style="height:50px; background:yellow; overflow:auto"> 
       <div layout="row" flex="none" layout-margin style="color:red"> 
        row content 
       </div> 
       <div layout="row" flex="none" layout-margin style="color:blue"> 
        row content 
       </div> 
       <div layout="row" flex="none" layout-margin style="color:green"> 
        row content 
       </div> 
      </div> 
     </md-content> 
     <br> 
     Basic: 
     <md-content> 
      <div layout="column"> 
       <div layout="row" flex="100" layout-margin style="color:red"> 
        row content 
       </div> 
       <div layout="row" flex="100" layout-margin style="color:blue"> 
        row content 
       </div> 
       <div layout="row" flex="100" layout-margin style="color:green"> 
        row content 
       </div> 
      </div> 
     </md-content> 
    </md-content> 
</div>