How to make scrollable mat-list
21,836
Solution 1
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.
Solution 2
add the following css:
mat-list { overflow: auto; }
Comments
-
Halil İbrahim Karaalp almost 2 years
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; } }