title: Angular material - scrollable flex child item
body: <p>I am trying out angular material, and in particular the flex layout attributes.</p>
  
  <p>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.</p>
  
  <p>What I would like is for the first child item to scroll, but not the second.</p>
  
  <pre><code>&lt;div ng-app="app" 
       layout="column" class="demo" &gt;
  
    &lt;md-toolbar&gt;
      &lt;h2 class="md-toolbar-tools"&gt;
        &lt;span&gt;Toolbar&lt;/span&gt;
      &lt;/h2&gt;
    &lt;/md-toolbar&gt;
    &lt;md-content&gt;
    &lt;div layout="row"&gt;
      &lt;md-card  flex&gt;
        Load of content&lt;br/&gt;
        Load of content&lt;br/&gt;
        Load of content&lt;br/&gt;
        Load of content&lt;br/&gt;
        Load of content&lt;br/&gt;
        Load of content&lt;br/&gt;
        Load of content&lt;br/&gt;
        Load of content&lt;br/&gt;
        Load of content&lt;br/&gt;
        Load of content&lt;br/&gt;
        Load of content&lt;br/&gt;
        Load of content&lt;br/&gt;
        Load of content&lt;br/&gt;
        Load of content&lt;br/&gt;
        Load of content&lt;br/&gt;
        Load of content&lt;br/&gt;
        Load of content&lt;br/&gt;
        Load of content&lt;br/&gt;
      &lt;/md-card&gt;
      &lt;div&gt;dgfdgfdg&lt;/div&gt;
    &lt;/div&gt;
    &lt;/md-content&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Current implementation - <a href="http://codepen.io/anon/pen/merXpr" rel="nofollow">http://codepen.io/anon/pen/merXpr</a></p>
  
  <p>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.  </p>
  
  <p>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.</p>
  
  <p>Thanks</p>