<div fxFlex="100" fxFlex.gt-sm="80" fxFlex.sm="100">
<div *ngFor="let permission of arrayOfObjectPermissions; let index = z" class="permissions-list">
<mat-card [title]="permission.type" class="card-permissions-role" >
<mat-card-header>
<mat-card-title>{{ permission.type }}</mat-card-title>
</mat-card-header>
<mat-chip-list [multiple]="true" >
<mat-chip *ngFor="let name of permission.res; let i = index"
selected="{{ !outlined[z][i] }}"
(click)="addRole(z, i, name.name)"
[value]="name.name"
[selectable]="true" style="cursor: pointer">
{{ name.name }}
</mat-chip>
</mat-chip-list>
</mat-card>
</div>
</div>
This issue occurs when the size of the mat-chip-list blocks exceeds 700px.