title: How to either disable scrolling in md-content or have a min-height when on mobile
body: <p>I'm using Angular Material's md-content directives to create a section that flexes to fill the usable vertical space and scrolls it's content. The problem is when viewing the page with a small screen, the content shrinks to the point that it effectively disappears. I'd like the md-content to stop scrolling or have a min-height so the page scrollbar shows up and the user can still see the content.</p>
  
  <p><strong>Update:</strong> Here's a plunker to demonstrate the problem: <a href="https://plnkr.co/edit/NVbEHo0CPxX5Zzi4U88U?p=preview" rel="nofollow">https://plnkr.co/edit/NVbEHo0CPxX5Zzi4U88U?p=preview</a></p>
  
  <pre><code>  &lt;body layout="column"&gt;
    &lt;div&gt;
      &lt;h1&gt;Header&lt;/h1&gt;
    &lt;/div&gt;
    &lt;md-content layout="row"&gt;
      &lt;div flex="50"&gt;Left Column&lt;/div&gt;  
      &lt;md-content flex="50" layout="column"&gt;
        &lt;h2&gt;Section Header&lt;/h2&gt;
        &lt;md-content layout="column" flex&gt;
          &lt;h3&gt;Scroll Header&lt;/h3&gt;
          &lt;md-content flex layout="column" style="min-height: 300px"&gt;
            &lt;md-content flex&gt;
              scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;
              scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;
              scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;scrollable content&lt;br/&gt;
            &lt;/md-content&gt;
          &lt;/md-content&gt;
        &lt;/md-content&gt;
      &lt;/md-content&gt;
    &lt;/md-content&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>If the browser window is large, the scrollable content scrolls as expected. When you shrink the browser, the <code>md-content</code> with the scrollable content shrinks down to nothing.</p>
  
  <p><strong>Update 2:</strong> I updated my plunker with a better example. To get the desired section scrollable and have it flex to the bottom of the viewport, I have all of its parent elements as <code>md-content</code> elements with a <code>layout</code> attribute. I can set a <code>min-height</code> on the scrollable element, but when the browser is shrunk now its parent <code>md-content</code> has a scroll bar. I could put another <code>min-height</code> on <em>that</em> <code>md-content</code>, but that would require me to know the height of its content (which could be dynamic).</p>
  
  <p>Ideally, when shrinking the browser vertically, I'd like the scrollable content to only shrink to its min-height, and then change the behavior of all its parent <code>md-content</code> elements to not scroll so only the <code>body</code> scroll bar appears.</p>