I’m trying to add linebreak to wrappable flex row items.
It basicaly work, but i have a gap i don’t understand.

You see on the image the gap (in blue) i don’t underestand, i want the .item to by stretched

rendered page

<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="break"></div>

<div class="item">3</div>
<div class="item">4</div>
<div class="item">1</div>
<div class="break"></div>

<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>

  
.container{
  background-color:lightblue;
  height:500px;
  width: 100%;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  gap: 5px
}

.item {
  align-content:center;
  text-align:center;
  min-width:150px;
  flex: 1 1 0;
  border:black solid 1px;
  background-color:silver;
  
}

.break {
  flex-basis:100%;
  height:0;
}

jsfiddle

Thank you