Arrange <mat-list-item> objects in <mat-list> automatically - html

Question

The sample code:
<div>
<mat-list fxLayout="row" dense>
<mat-list-item *ngFor="let label of labelsList"> <!-- just an array of strings -->
<button mat-button>
<mat-icon>cloud</mat-icon>
{{label}}
</button>
</mat-list-item>
</mat-list>
</div>
The result:
When I resize the browser window:
What I need: the buttons that don't "have room" to simply go on the next row.
How do I achieve this? I tried several combinations of CSS classes, properties, etc... nothing worked.
LATER EDIT: here's a complete reproducible example: https://angular-svt72k.stackblitz.io

Answer 1

mat-list-item is by default using the full width of its container and setting each item as display: block. To overrule this, you need to override the default Angular (Material) styling that comes with <mat-list>.
Setting .mat-list-test to display: flex and adding flex-flow: row wrap will make it go to the next line when there's not enough space available. Next to that, as said, the .mat-list-item styling is taking the full width. You can override it by setting display: initial and width: auto. Read more about flexbox at MDN.
CSS
.mat-list-test {
display: flex;
flex-flow: row wrap;
}
.mat-list-base .mat-list-item.mat-list-item-test {
display: initial;
width: auto;
}
See this example on StackBlitz to show the outcome.