Материал Google - прокрутить div с установленной высотой

Question

У меня есть div высоты набора. Я устанавливаю div в столбец в материале google, а затем добавляю строки содержимого.

Моя проблема заключается в следующем:

Если я не установлен контейнер DIV, чтобы иметь фиксированную высоту, то ДИВ не прокручивать - содержание переполнения просто не отображается.

Если я устанавливаю контейнер на фиксированную высоту, то строки сжимаются вместе, чтобы вписаться в это пространство, и форматирование будет потеряно.

Это похоже на то, что должно быть чрезвычайно простым в использовании. Я вижу ответы, которые говорят, что вы должны внедрять элементы md-content, которые у меня есть в приведенном ниже коде. Это неодобрительно воспринимается материальными документами и понятно. Любая помощь приветствуется.

<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

Вам просто нужно установить flex="none" для внутренних div с - CodePen

С docs

разметке

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