Определение линии разрыва линии с угловым сгибанием

Question

В настоящее время я просто отображаю div в нескольких строках.

Мне нужно отображать div в одной строке, пока он не достигнет размера 60, когда он достигнет этого размера, следующий div будет в новой строке.

Я могу делать 3 или более дел в одной строке, пока не достигну размера 60.

Мне нужно сделать это, используя fxLayout.xs, чтобы знать, когда отображать только следующую строку, игнорируя размер 60.

Ниже у меня есть код, где он отображается только в строках.

component.html:

    <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="start">
        <mat-form-field fxFlex="30" [floatLabel]="true">
            <mat-label> Field 1</mat-label>
            <input matInput name="field1" placeholder="Field 1">
        </mat-form-field>

        <mat-form-field fxFlex="30" [floatLabel]="true">
            <mat-label>Field 2</mat-label>
            <input matInput name="field2" placeholder="Field 2">
        </mat-form-field>
    </div>


    <div class="h3 blue-fg">
       Select options?
    </div>

    <div fxLayout="column" fxLayout.xs="column" fxLayoutAlign="start start">
        <mat-checkbox>Checkbox 1</mat-checkbox>
        <mat-checkbox>Checkbox 2</mat-checkbox>
        <mat-checkbox>Checkbox 3</mat-checkbox>
        <mat-checkbox>Checkbox 4</mat-checkbox>
        <mat-checkbox>Checkbox 5</mat-checkbox>
    </div>