Flexbox & Images - разные результаты в Chrome и Firefox

Question

Я пытаюсь отобразить изображения на сетке flexbox, и она работает так, как задумано в Chrome, но не в Firefox (не знаю, какая из них неправильная).

Ссылка на CodePen : https://codepen.io/anon/pen/QJNajw?editors=1100

Chrome:

Firefox:

Идея CSS заключается в том, чтобы сначала сделать ячейки сетки занимающими все доступное пространство, а затем позволить изображениям заполнять ячейки без растяжения.

Похоже, что в Firefox изображения просто занимают всю доступную ширину, что приводит к переполнению. (Обратите внимание, что во второй сетке макет более широкий, чем высокий, поэтому он не перекрывается по вертикали, когда изображения используют доступную ширину.)

Есть ли способ заставить его работать так, как задумано в 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

Интересный случай! Я не знаю, почему это происходит с flexbox.

Но после некоторого эксперимента я выяснил, что он работает, располагая img относительно его ячейки:

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

Это работает как в Firefox, так и в Chrome.

Answer 2

Я не очень хорошо понимаю разницу между браузерами, но вы можете просто установить максимальную ширину изображений, чтобы они не увеличивались в размерах, чем вы хотели. Изображения треугольной сетки по умолчанию 25px, чтобы вы могли соответствовать этому, например так:

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