CSS wrappable flex row, weird gap when trying to add line break when container height is fixed (or 100% parent)

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

I don't have a specific pattern, it comes from a setting file (So i want to rely on responsiveness of flexbox)

I want the render to use fill all the container space with items separated with breaks. I made the container wrappable to let items wraps in case of small screens (like phones).

Example pattern with a line group of 2 items, followed by two lines group of 3 items.

<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">5</div><div class="break"></div><div class="item">6</div><div class="item">7</div><div class="item">8</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

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

rendered page

Thank you