Kevin Powell - CommunityKP-C
Kevin Powell - Community•8mo ago•
8 replies
MC23

Problem with flex wrap

I'm having a flex container that wraps differently from what I expected. I'd like the single selects to go next to the dates, but since the first div with dates wraps itself, the selects go in a new row. 

<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;
}
image.png
Was this page helpful?