css - Google Material -滚动div并设置高度

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

我的问题是这样的：

如果我未将容器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>

最佳答案

您只需要为内部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>

关于css - Google Material -滚动div并设置高度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38780353/