fxFlex добавление 100% ширины к дочерним компонентам

Question

Я использую Flex Layout Angular, и это здорово. Я добавил flex к дочернему компоненту <div fxFlex="100">, который делает DIV шириной 100%, однако ширина нижеприведенного компонента также равна 100%. Я не хочу применять ширину к внутреннему компоненту. Как я могу предотвратить это?

<div fxLayout="column" fxLayoutAlign="center center">
    <mat-card>
        <div fxLayout="row wrap" fxLayout.xs="column" fxLayoutGap="10px" fxLayoutAlign="center center">
            <div fxFlex="100"> ==============================> added 100% width to the div, which is fine
                <mat-form-field appearance="outline"> ==================> However, inner component is also added to 100% width it should be default
                    <mat-label>Make</mat-label>
                    <mat-select>
                        <mat-option>None</mat-option>
                        <mat-option *ngFor="let state of states" [value]="state">{{state}}</mat-option>
                    </mat-select>
                </mat-form-field>
            </div>
        </div>
    </mat-card>
</div>