yisibl recently brought up the following case:

Currently the img width in Chrome is equal to 0.5px, which is not expected anyway.

<style>
.box {
  display: masonry;
  item-tolerance: 0;
  grid-template-columns: repeat(auto-fill, auto);
  width: 600px;
  min-height: 20px;
  outline: 1px solid red;
}

img {
  width: 100%;
  height: auto;
  display: block;
}
</style>

I originally thought this rendering in Chromium was a bug, but @bfgeek mentioned this is expected per css-sizing-3 (specifically the section on compressible replaced elements).

As a result, this sort of scenario can be hit in Grid, for example, as well, but may be hit by authors more often in Masonry.

What ends up happening is that when we size the auto tracks to get the auto repeat track count for repeat(auto-fill, auto), we calculate the min content size for the images to 0. Then the tracks are sized according to this min-content size.

Should we consider not taking the min-content size when sizing the tracks, or consider other alternatives to the compressible replaced elements logic for Masonry (and Grid)?

cc: @tabatkins