Firefox ESR中的CSS Grid自动行高度问题

Question

我使用网格布局显示一堆16：9宽高比div和背景图像。它在所有现代浏览器中都非常有效，直到一个客户告诉他们他们的公司使用Firefox ESR（似乎没有最新的网格功能）之前。

我做了一些实验，看起来无法达到这个动态元素的高度。如果我将height: 61px;添加到.media-element类中，则可以使用，但是无法再保持宽高比。我认为问题在于grid-auto-rows属性，它无法读取非显式的高度值，但这只是一个猜测。

这是该浏览器中的外观：

以及它在其他浏览器中的外观和功能：

以前有人遇到过此问题吗？真正的问题是什么，有什么解决方案？ 我真的不想固定行高，因为我需要16：9的宽高比。 还是有另一种方法可以强制元素仅使用CSS而不使用任何JavaScript来保持其长宽比？

.grid-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 4px;
    grid-auto-rows: auto;
    -ms-flex-line-pack: start;
    align-content: start;
    min-width: 0;
    overflow-y: auto;
    padding: 5px;
    -webkit-overflow-scrolling: touch;
}

.media-element {
    border: solid 1px #17353f;
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    background: #EEEEEE;
}

div.preview-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-size: cover;
}

<div class="grid-content">
  <div class="media-element">
    <div class="preview-img" style="background-image: url(https://i.imgur.com/acLOzS1.jpg)"></div>     
  </div>
  <div class="media-element">
    <div class="preview-img" style="background-image: url(https://i.imgur.com/acLOzS1.jpg)"></div>     
  </div>
  <div class="media-element">
    <div class="preview-img" style="background-image: url(https://i.imgur.com/acLOzS1.jpg)"></div>     
  </div>
  <div class="media-element">
    <div class="preview-img" style="background-image: url(https://i.imgur.com/acLOzS1.jpg)"></div>     
  </div>
  <div class="media-element">
    <div class="preview-img" style="background-image: url(https://i.imgur.com/acLOzS1.jpg)"></div>     
  </div>
  <div class="media-element">
    <div class="preview-img" style="background-image: url(https://i.imgur.com/acLOzS1.jpg)"></div>     
  </div>
  <div class="media-element">
    <div class="preview-img" style="background-image: url(https://i.imgur.com/acLOzS1.jpg)"></div>     
  </div>
</div>