Google Material - 以设置的高度滚动 div

Question

我有一个div的设定高度。我将 div 设置为 google material 中的一列，然后添加内容行。

我的问题是：

如果我没有将容器 div 设置为具有固定高度，则 div 不可滚动 - 溢出内容根本不会显示。

如果我将容器设置为固定高度，那么行会被推到一起以适应该高度space，并且格式会丢失。

这看起来应该是一件非常简单的事情。我看到答案说你应该嵌入我在下面的代码中的 md-content 元素。 material 文档不赞成这种做法，这是可以理解的。感谢任何帮助。

<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

您只需为内部 div 设置 flex="none" - 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>

Google Material - 以设置的高度滚动 div

Google Material - Scroll div with set height

css

angular-material