title: How to make scrollable mat-list
body: <p>I'm trying to build a mat-list inside a responsive height container with Angular 4.4.6 and Angular Material 2.0.0-beta.12. How can I make the mat-list scrollable without overflowing parent container?</p>
  
  <p>Here's the stackblitz URL: <a href="https://stackblitz.com/edit/angular-material2-issue-tedisv?file=app%2Fapp.component.scss" rel="noreferrer">https://stackblitz.com/edit/angular-material2-issue-tedisv?file=app%2Fapp.component.scss</a></p>
  
  <pre><code>:host{
    border: 3px dashed red;
    width: 100%;
    min-height: 150px;
    max-height: 350px;
    height: 10%;
    display: flex;
    flex-direction: column;
    mat-toolbar {
      flex-grow: 0;
    }
    mat-list {
      flex-grow: 1;
      border: 3px solid green;
    }
  }
  </code></pre>