Обернуть содержимое детей соответственно ширине основного родителя

Question

Интересно, есть ли flex-way для создания fluid подобного поведения контейнера parent: перемещая красные поля n1 и n2 слева от синего поля n3 и в результате перемещая красное поле n3 к левой стороне контейнера

.parent {
  display: flex;
  width: 525px;
  flex-wrap: wrap;
  background-color: green;
}

.child {
  flex-wrap: wrap;
  display: flex;
}

.box {
  width: 100px;
  height: 100px;
  margin: 5px;
}

.blue .box {
  background-color: blue;
}

.red .box {
  background-color: red;
}

<div class='parent'>
  <div class='child blue'>
    <div class='box'>1</div>
    <div class='box'>2</div>
    <div class='box'>3</div>
  </div>
  <div class='child red'>
    <div class='box'>1</div>
    <div class='box'>2</div>
    <div class='box'>3</div>
  </div>
</div>

Answer 1

Вы можете использовать display:contents (https://caniuse.com/#feat=css-display-contents) на .child элементах, чтобы поля работали так, как если бы они были дочерними для элемента .parent.

.parent {
  display: flex;
  width: 555px;
  flex-wrap: wrap;
  background-color: green;
}

.child {
  flex-wrap: wrap;
  display: flex;
  display:contents
}

.box {
  width: 100px;
  height: 100px;
  margin: 5px;
}

.blue .box {
  background-color: blue;
}

.red .box {
  background-color: red;
}

<div class='parent'>
  <div class='child blue'>
    <div class='box'>1</div>
    <div class='box'>2</div>
    <div class='box'>3</div>
  </div>
  <div class='child red'>
    <div class='box'>1</div>
    <div class='box'>2</div>
    <div class='box'>3</div>
  </div>
</div>