Flexbox内部最大高度的图像在Chrome和Safari中具有不需要的垂直空间

Question

我有一组包含图像的flexbox，其布局如下：

＆＃13;

＆＃13;

.immagini {
  margin: 0 auto;
  width: 90%;
  height: auto;
  position: relative;
  display: -webkit-flex;
  display: flex;
}

.immagini img {
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  margin: 0 10px 40px;
  max-height: 600px;
  min-height: 0;
  min-width: 0;
  width: auto;
  object-fit: scale-down;
}

＆＃13;

<div class="immagini">
  <img src="1.jpg">
  <img src="2.jpg">
  <img src="3.jpg">
</div>
<div class="immagini">
  <img src="4.jpg">
  <img src="5.jpg">
  <img src="6.jpg">
</div>

＆＃13;

＆＃13;

＆＃13;

我想要的是div之间只有40px的底部边距，我给图像留出的余量，以及在Firefox上完美运行。这是Firefox上发生的事情（以及我希望发生的事情）。

Firefox上会发生什么：

但是在Chrome和Safari上，max-height: 600px意外地将它们之间的图像垂直隔开，好像它们位于一个固定高度为600px的假想div内。我不明白为什么会这样。以下是Chrome和Firefox上发生的事情的屏幕截图（我不希望发生）。在较小的屏幕上显然会变得更糟。

Chrome和Safari会发生什么：

你能建议一个解决方案吗？如何让Chrome和Safari的行为像Firefox一样？

编辑：这是一个有效的代码：https://codepen.io/Ada_Snufkin/pen/rJjEda