Angular material - scrollable flex child item - angular-material

Question

I am trying out angular material, and in particular the flex layout attributes.
I have a column layout containing a child div with a row layout, which contains a further two child items, one of which has flex.
What I would like is for the first child item to scroll, but not the second.
<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>
Current implementation - http://codepen.io/anon/pen/merXpr
I noticed the md-content directive can be used for scrolling content, which I tried by wrapping around the containing div housing my two child items, but of course this just makes the whole content area scroll.
Is there a way I can get just the md-card item to scroll? I did try wrapping md-card with the md-content instead, but this made no difference.
Thanks

Answer 1

From what I understand, you want only the card to scroll, but not the rest of the content on the page. I've done this a few times in different contexts, but overall, this is a simple css-related fix.
You want to add the css property overflow: auto as a property to anything that you may want to have scroll within itself. As far as I understand, there is no way to do this strictly with Angular Material directives, attributes, or classes. However, just adding a custom css class to the element in question and defining that in your css works great.
Below, I've pasted your modified code from codepen into a snippet, followed by the modified 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