Angular 材质 - 可滚动的 flex 子项

Question

我正在尝试角度材质，尤其是 flex 布局属性。

我有一个列布局，其中包含一个带有行布局的子 div，其中包含另外两个子项，其中一个具有 flex。

我想要的是第一个子项滚动，而不是第二个。

<div ng-app="app" 
     layout="column" class="demo" >

  <md-toolbar>
    <h2 class="md-toolbar-tools">
      <span>Toolbar</span>
    </h2>
  </md-toolbar>
  <md-content>
  <div layout="row">
    <md-card  flex>
      Load of content<br/>
      Load of content<br/>
      Load of content<br/>
      Load of content<br/>
      Load of content<br/>
      Load of content<br/>
      Load of content<br/>
      Load of content<br/>
      Load of content<br/>
      Load of content<br/>
      Load of content<br/>
      Load of content<br/>
      Load of content<br/>
      Load of content<br/>
      Load of content<br/>
      Load of content<br/>
      Load of content<br/>
      Load of content<br/>
    </md-card>
    <div>dgfdgfdg</div>
  </div>
  </md-content>
</div>

当前实现 - http://codepen.io/anon/pen/merXpr

我注意到 md-content 指令可用于滚动内容，我尝试将包含我的两个子项的包含 div 包裹起来，但当然这只会使整个内容区域滚动。

有没有办法让 md-card 项目滚动？我确实尝试用 md-content 包装 md-card，但这没有任何区别。

谢谢

Answer 1

据我了解，您只希望卡片滚动，而不是页面上的其余内容。我在不同的上下文中做过几次，但总的来说，这是一个简单的 CSS 相关修复。

您希望将 css 属性 overflow: auto 作为属性添加到您可能希望在其内部滚动的任何内容。据我了解，没有办法严格使用 Angular Material 指令、属性或类来做到这一点。但是，只需将自定义 css 类添加到相关元素并在您的 css 中定义它就可以了。

下面，我已将您修改后的代码从 codepen 粘贴到 sn-p 中，然后是修改后的 codepen url。

(function() {
  'use strict';

  angular
    .module('app', ['ngMaterial']);
})();

.demo {
  width: 600px;
  height: 300px;
  background-color: #cccccc;
  margin-top: 40px;
  margin-left: 0px;
}
.scroll-this {
  overflow: auto;
}

<link href="http://rawgit.com/angular/bower-material/master/angular-material.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-animate.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-aria.js"></script>
<script src="http://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<div ng-app="app" layout="column" class="demo">
  <md-toolbar>
    <h2 class="md-toolbar-tools">
      <span>Toolbar</span>
    </h2>
  </md-toolbar>
  <div layout="row">

    <md-card class="scroll-this" flex>
      Load of content
      <br/>Load of content
      <br/>Load of content
      <br/>Load of content
      <br/>Load of content
      <br/>Load of content
      <br/>Load of content
      <br/>Load of content
      <br/>Load of content
      <br/>Load of content
      <br/>Load of content
      <br/>Load of content
      <br/>Load of content
      <br/>Load of content
      <br/>Load of content
      <br/>Load of content
      <br/>Load of content
      <br/>Load of content
      <br/>

    </md-card>
    <div>Something here</div>
  </div>
</div>

http://codepen.io/anon/pen/bpdXeB