Flexbox & Images — different results in Chrome and Firefox

Question

I am trying to display images on a flexbox grid, and it works as intended in Chrome but not in Firefox (not sure which one is wrong).

Link to CodePen : https://codepen.io/anon/pen/QJNajw?editors=1100

Chrome:

Firefox:

The idea behind the CSS is to first make the cells of the grid occupy all available space, and then let the images fill the cells without stretching.

Looks like in Firefox the images just consume all the available width, which results in an overflow. (Notice that in the second grid, the layout is more wide than tall, so it does not overlap vertically when the images consume the available width.)

Is there a way to make it work as intended in Firefox?

 .grids { display: flex; } .grid { display: flex; flex-direction: column; background: #ddd; box-sizing: border-box; border-radius: 10px; margin: 5px; padding: 2px; width: 120px; height: 120px; } .row { display: flex; justify-content: center; flex-grow: 1; flex-basis: 0; } .cell { display: flex; flex-grow: 1; flex-basis: 0; justify-content: center; align-items: center; box-sizing: border-box; height: 100%; padding: 2px; } .cell img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; } 

 <div class="grids"> <div class="grid"> <div class="row" style="padding: 0px 16.6667%;"> <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div> <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div> </div> <div class="row" style="padding: 0px 0%;"> <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div> <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div> <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div> </div> <div class="row" style="padding: 0px 16.6667%;"> <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div> <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div> </div> <div class="row" style="padding: 0px 0%;"> <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div> <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div> <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div> </div> </div> <div class="grid"> <div class="row" style="padding: 0px 37.5%;"> <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div> </div> <div class="row" style="padding: 0px 25%;"> <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div> <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div> </div> <div class="row" style="padding: 0px 12.5%;"> <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div> <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div> <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div> </div> <div class="row" style="padding: 0px 0%;"> <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div> <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div> <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div> <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div> </div> </div> </div> 

Answer 1

Interesting case! I don't know why this happens with flexbox.

But, after some experimenting I figured out that it works by positioning the img relative to its cell:

.cell {
     position: relative;
}
.cell img {
    position: absolute;
}

This works in both Firefox and Chrome.

Answer 2

I have no great insight as to the difference between browsers, but you could just set a max-width on the images so that they don't grow larger than you'd like. The triangle grid images default to 25px so you could match that, like this:

.cell img {
  display: block;
  width: 100%;
  max-width: 25px;
  max-height: 100%;
  object-fit: contain;
}