Why I am not able to use display flex in angular?

Question

I am new to angular and I'm just exploring. I have tried from google and many more but I didnt find a answer why I am not able to apply display flex in <mat-form-field>

this is my html

 <form [formGroup]="searchForm" (ngSubmit)="onSearch()">

        <mat-card>
            <h4>Case Information</h4>
            <!--  -->
            <mat-form-field>
                <label for="case-type">Case Type</label>
                <mat-select id="case-type" type="text" formControlName="caseType">
                    <mat-option value="opt1">option1</mat-option>
                </mat-select>
            </mat-form-field>
            <!--  -->
            <mat-form-field>
                <label for="document-type">Document Type</label>
                <mat-select id="document-type" type="text" formControlName="documentType">
                    <mat-option value="opt1">option1</mat-option>
                </mat-select>
            </mat-form-field>
            <!--  -->
            <mat-form-field>
                <label for="receipt-from-date">Receipt Date (from)</label>
                <input id="receipt-from-date" formControlName="receiptFromDate" matInput [matDatepicker]="picker">
                <mat-hint>MM/DD/YYYY</mat-hint>
                <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
                <mat-datepicker #picker></mat-datepicker>
            </mat-form-field>
            <!--  -->
            <mat-form-field>
                <label for="fed-id">Federal ID #</label>
                <input id="fed-id" type="text" formControlName="federalIdNumber" matNativeControl>
            </mat-form-field>
            <!--  -->
            <mat-form-field>
                <label for="document-number">Document #</label>
                <input id="document-number" type="text" formControlName="documentNumber" matNativeControl>
            </mat-form-field>
        </mat-card>

        <mat-card>
            <h4>Invoice Information</h4>
            <!--  -->
            <mat-form-field>
                <label for="invoice-number">Invoice #</label>
                <input id="invoice-number" type="text" formControlName="invoiceNumber" matNativeControl>
            </mat-form-field>
            <!--  -->
            <mat-form-field>
                <label for="invoice-date">Invoice Date</label>
                <input id="invoice-date" formControlName="invoiceDate" matInput [matDatepicker]="picker">
                <mat-hint>MM/DD/YYYY</mat-hint>
                <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
                <mat-datepicker #picker></mat-datepicker>
            </mat-form-field>
            <!--  -->
            <mat-form-field>
                <label for="invoice-amount">Invoice Amount ($)</label>
                <input id="invoice-amount" type="text" formControlName="invoiceAmount" matNativeControl>
            </mat-form-field>
        </mat-card>

        <div class="form-actions">
            <button mat-raised-button class="form-action-button" color="warn" type="submit">Search</button>
            <button mat-stroked-button class="form-action-button" (click)="onReset()">Reset</button>
        </div>
    </form>

This is My Scss

mat-form-field {
    display: flex;
    flex-direction: column;
}

please do not take negatively as I am new to angular and stuck in project

My Output :

Expecting Output

I have tried by display: flex;flex-direction: column; and make changes in div but not working.

Answer 1

the following link has simulated what you want.

appearance="outline" in matformfields works for you for bordering.

stackblitz example