img in grid taking up more space on Firefox than Chrome

Question

In the example below, Firefox (as well as Safari) use the img's origin size rather than make it fit into the grid like Chrome does. Is there a work around for these browsers?

for (let i = 0; i < 6; i++)
{
  $("#first").append(`
    <div class="item">
      <img src="http://via.placeholder.com/350x650" />
    </div>
    `);  
}

.flex {
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.footer {
  height: 20%;
}
.upper {
  flex: 1;
  overflow: auto;
}

#grid {
  border: 1px solid black;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  height: 100%;
  position: relative;
  max-width: 100%;
  text-align: center;
}

.inner-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

.item {
  display: inline-block;
  text-align: center;
  min-height: 0;
  min-width: 0;
}

img {
  max-height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="flex">
  <div class='upper'>
    <div id="grid">
      <div id='first' class="inner-grid">
      </div>
      <div>
      test
      </div>
      <div class="inner-grid">
      </div>
    </div>  
  </div>
  <div class="footer">
    footer
  </div>
</div>