title: 16:9 padding-bottom trick not working as expected in FireFox
body: <p>I've been trying to implement the responsive 16:9 ratio trick for a content block and while getting the expected result in Chrome, other browsers such as FireFox and Edge display it completely differently and not as intended.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.streamContainer {
    position: absolute;
    width: 80%;
    height: calc(100% - 120px);
    display: flex;
    bottom: 0px;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    transition: height 0.5s;
    background: blue;
  }
  .streamRatio {
    position: relative;
    width: 100%;
    padding: 56.25% 0 0 0;
    content: '';
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    background: red;
    height: 0;
  }
  .streamInner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: green;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="streamContainer"&gt;
    &lt;div class="streamRatio"&gt;
      &lt;div class="streamInner"&gt;
        Content Goes Here
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The following images show the intended result on Chrome and the unintended result on FireFox:</p>
  
  <p><a href="https://i.imgur.com/iiq6B0x.png" rel="noreferrer"><img src="https://i.imgur.com/iiq6B0x.png" alt="Chrome"></a>
  <a href="https://i.imgur.com/iiq6B0x.png" rel="noreferrer">Chrome - Imgur</a><br />
  <a href="https://i.imgur.com/QzRiUrE.png" rel="noreferrer"><img src="https://i.imgur.com/QzRiUrE.png" alt="FireFox"></a>
  <a href="https://i.imgur.com/QzRiUrE.png" rel="noreferrer">FireFox - Imgur</a></p>
  
  <p>The blocks of color are just there to help visualise the different boxes.</p>