Maintaining height of element relative to its width

Asked Apr 25 '18 at 13:22

Active Apr 25 '18 at 15:27

Viewed 40 times

I've seen this technique and used it many times before: https://stackoverflow.com/a/10441480/775007

Except this no longer works in Firefox (59.0.2) or the latest 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>

Some LESS:

.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;
    }
  }
}

Here is a demo: https://codepen.io/anon/pen/jxrGxK