Как заставить максимальное количество ящиков подряд в flex?

Question

У меня есть 4 элемента, которые я хочу отобразить на странице.Два предмета сверху и 2 снизу.Нижние размеры должны отличаться от верхних.Я использую flexbox для этого.Проблема в том, что на широком мониторе третий элемент продолжает переноситься в верхний ряд.Вот мой код.

.dashboard {
  &-inner {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-content: center;
    min-height: 100vh;
    margin-top: $reporting-report-offset-top;
    max-width: 1900px;

    &-grid {
      display: flex;
      flex-flow: row wrap;
      justify-content: center;
      align-content: center;
      overflow: hidden;
      max-height: 100%;
      margin: 0 auto;
      max-width: 1900px;

      &-item {
        margin: $reporting-view-spacing;
        // &-1 {
        //   min-width: 50%;
        // }

        &-2 {
          // min-width: 50%;
          // margin-right: 100px
        }

        &-3 {
          max-width: 238px !important;
          margin-right: 8px;
          height: 687px !important;
      }

Два верхних элемента будут занимать 50% доступной ширины (включая поля), третий элемент должен занимать приблизительно 25% нижнего ряда, а четвертый элемент - другой.75%.Как заставить нижний элемент переместиться во второй ряд и не допустить его переноса на верх?

Answer 1

Вот способ стилизации элемента для добавления разрыва строки в элементе flex.

.separator {
   content: '';
   width: 100%;
}

.boxes {
  display: flex;
  flex-flow: row wrap;
}

.box {
  height: 100px;
  background: red;
  border: 1px solid black;
  box-sizing: border-box;
}

.box--25 {
  width: 25%;
}

.box--50 {
  width: 50%;
}

.box--75 {
  width: 75%;
}

.separator {
  content: '';
  width: 100%;
}

<div class="boxes">
  <div class="box box--50"></div>
  <div class="box box--50"></div>
  <br class="separator" />
  <div class="box box--25"></div>
  <div class="box box--75"></div>
</div>