保持元素相对于其宽度的高度

Question

我见过这种技术并且之前使用过很多次： https://stackoverflow.com/a/10441480/775007

除此之外不再适用于Firefox（59.0.2）或最新的Edge。

<div class="boxes">
  <div class="box"><div class="inner"></div></div>
  <div class="box"><div class="inner"></div></div>
  <div class="box"><div class="inner"></div></div>
  <div class="box"><div class="inner"></div></div>
  <div class="box"><div class="inner"></div></div>
  <div class="box"><div class="inner"></div></div>
  <div class="box"><div class="inner"></div></div>
  <div class="box"><div class="inner"></div></div>
</div>

有些少：

.boxes {
  display: flex;
  flex-flow: row wrap;
  outline: 1px solid cyan;
  width: 1000px;
  .box {
    position: relative;
    width: 25%;
    height: 0;
    padding-bottom: 25%;
    .inner {
      position: absolute;
      left: 0; right: 0; top: 0; bottom: 0;
      width: 100%;
      height: 100%;
      background: red;
      outline: 1px solid cyan;
    }
  }
}

这是一个演示： https://codepen.io/anon/pen/jxrGxK