How to make scrollable mat-list

7
votes

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?

Here's the stackblitz URL: https://stackblitz.com/edit/angular-material2-issue-tedisv?file=app%2Fapp.component.scss

: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;
  }
}
2
angularlistresponsiveangular-material2
Demo is at angular-material2-issue-tedisv.stackblitz.io – Halil İbrahim Karaalp

2 Answers

14
votes
mat-list {
    flex-grow: 1;
    border: 3px solid green;
    overflow: auto;
}

I'm sure that i've tried overflow: auto; yesterday (before posting the question) and it didn't worked. But today it works. I may have faced a caching issue related to ng cli or browser cache.

2
votes

add the following css: 

mat-list { overflow: auto; }