fxLayoutGap not setting even width on wrap

Question

Code

<div fxLayout="row" fxLayoutAlign="center start" class="blue-grey lighten-5 h-full p-1">
    <div fxFlex="100%" fxLayout="row wrap" fxLayoutAlign="start center" fxLayoutGap="1rem">
        <ng-container *ngFor="let category of categories">
            <mat-card fxFlex="calc(50% - 1rem)" class="mb-1">
                <mat-card-content>
                    <div fxLayout="column" fxLayoutAlign="center center">
                        <div class="svg" [innerHTML]="category.iconSanitized">

                        </div>
                        <div class="title fw-600">{{category.name}}</div>

                    </div>
                </mat-card-content>
            </mat-card>
        </ng-container>
    </div>
</div>

Output

As you could see the width of the second row card increased and they are not evenly spaced.

I want it to be at 50% of the width.

I have tried giving negative margin but did not work.

p1 -> padding:1rem mb-1 -> margin-bottom: 1rem