I am working with the basic mat-chips from angular material and I want to arrange them in rows of five without increasing their size:
Chip1 Chip2 Chip3 Chip4 Chip5 ..................(space left)
Chip6 Chip7 Chip8 Chip9 Chip10 ...............(space left)
Chip11 Chip12 ....................................................(space left).
I need the chips' sizes to remain consistent at all times. Can this be achieved using flexbox? This is what I have tried so far: HTML:
<div class='list'>
<mat-form-field class="example-chip-list" appearance="fill">
<mat-label>Favorite Fruits</mat-label>
<mat-chip-list #chipList aria-label="Fruit selection">
<mat-chip *ngFor="let fruit of fruits" id='item' (removed)="remove(fruit)">
{{fruit.name}}
<button matChipRemove>
<mat-icon>cancel</mat-icon>
</button>
</mat-chip>
</mat-chip-list>
</mat-form-field>
</div>
CSS:
.list{
width: 100%;
flex-flow: row wrap;
}
#item{
flex: 1 0 20%; //I've attempted this, but it's not working as the chip sizes are still expanding to fill the div
}