Problem with flex wrap

<div class="flex gap-10">
  <!--# DATE RANGES -->
  <div formGroupName="dates" class="flex gap-10"> 
    <app-kendo-date-filter>...</app-kendo-date-filter>
    <app-kendo-date-filter>...</app-kendo-date-filter>
    <app-kendo-date-filter>...</app-kendo-date-filter>
    <app-kendo-date-filter>...</app-kendo-date-filter>
  </div>
  <!--# SINGLE SELECT -->
  <div formGroupName="singleSelect" class="flex gap-10">
    <mat-form-field>...</mat-form-field>
    <mat-form-field>...</mat-form-field>
    <mat-form-field>...</mat-form-field>
    <mat-form-field>...</mat-form-field>
    <mat-form-field>...</mat-form-field>
  </div>
</div>

.gap-10 {
  gap: 10px;
}
.flex {
  display: flex;
  flex-flow: row wrap;
}