It is posible to have a div parent with display flex and that the first child push the next siblings to the bottom line.

I have this situation and using display flex and the structure can´t be modify.

This could be done with grid with 3 lines of code, but I can´t figgure it out using flex in the parent.

<div class=items-container>
  <div class="item1">item 1</div>
  <div class="item2">item 2</div>
  <div class="item3">item 3</div>
</div>

I left the example in this link:
https://codepen.io/plevindo/pen/porqbXv

>Solution :

Pretty simple, just use flex with flex-wrap on the parent, and the first item set flex-basis to 100%. That will push the siblings to the next line.

.items-container {
  display: flex;
  flex-wrap: wrap;
}

.item1 {
  flex: 1 1 100%;
 }

<div class=items-container>
  <div class="item1">item 1</div>
  <div class="item2">item 2</div>
  <div class="item3">item 3</div>
</div>