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;
}
}
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.