CSS flexbox horizontal masonry: place one more item than fits/negative space between -

this might bit hard explain. let's start example:

.gallery {    display: flex;    flex-wrap: wrap;    justify-content: space-between;  }    .iw {    overflow: hidden;    text-align: center;  }

<div class="gallery">    <div class="iw"><img src="http://via.placeholder.com/350x150"></div>    <div class="iw"><img src="http://via.placeholder.com/150x150"></div>    <div class="iw"><img src="http://via.placeholder.com/250x150"></div>    <div class="iw"><img src="http://via.placeholder.com/325x150"></div>    <div class="iw"><img src="http://via.placeholder.com/175x150"></div>    <div class="iw"><img src="http://via.placeholder.com/250x150"></div>    <div class="iw"><img src="http://via.placeholder.com/300x150"></div>    <div class="iw"><img src="http://via.placeholder.com/175x150"></div>    <div class="iw"><img src="http://via.placeholder.com/225x150"></div>  </div>

this how renders on screen:

see how there's gaps between items? want remove gap entirely shifting 1 item row above. e.g. move box end of row 1.

then, because i've set overflow: hidden , text-align: center on .iw, want left , right edges of each image chopped off little bit fits snug in row.

how can achieve effect?

---

by setting min-width on each of containers 50% of image's width, can close effect i'm looking for:

.gallery {    display: flex;    flex-wrap: wrap;  }    .iw {    overflow: hidden;    flex: 1 0;    position: relative;    height: 150px;  }    .iw>* {    position: absolute;    top: -99999px;    right: -99999px;    bottom: -99999px;    left: -99999px;    margin: auto;  }

<div class="gallery">    <div class="iw" style="min-width:175px;max-width:350px"><img src="http://via.placeholder.com/350x150/00f"></div>    <div class="iw" style="min-width:75px;max-width:150px"><img src="http://via.placeholder.com/150x150/0f0"></div>    <div class="iw" style="min-width:125px;max-width:250px"><img src="http://via.placeholder.com/250x150/0ff"></div>    <div class="iw" style="min-width:162.5px;max-width:325px"><img src="http://via.placeholder.com/325x150/f00"></div>    <div class="iw" style="min-width:87.5px;max-width:175px"><img src="http://via.placeholder.com/175x150/f0f"></div>    <div class="iw" style="min-width:125px;max-width:250px"><img src="http://via.placeholder.com/250x150/ff0"></div>    <div class="iw" style="min-width:150px;max-width:300px"><img src="http://via.placeholder.com/300x150/00f"></div>    <div class="iw" style="min-width:87.5px;max-width:175px"><img src="http://via.placeholder.com/175x150/0f0"></div>    <div class="iw" style="min-width:112.5px;max-width:225px"><img src="http://via.placeholder.com/225x150/0ff"></div>  </div>

except can bit spaced depending on browser width, no good. also, aren't centered in divs -- both left , right side should chopped, not right.

---

you can see it's close working: https://i.imgur.com/lv5a210.gifv

but team-fortress-girls pic should have been last 1 on row. can see how squishes other images make room, next pic should have started on next row. instead, squish down 50% (min-width) before forces next pic onto 2nd row.