Google Material - 滚动div设置高度

Question

我有一个设定高度的div。我正在设置谷歌材料中的列，然后添加内容行。

我的问题是：

如果我没有将容器div设置为具有固定高度，则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>