16:9 padding-bottom trick not working as expected in FireFox

Question

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.

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

<div class="streamContainer">
  <div class="streamRatio">
    <div class="streamInner">
      Content Goes Here
    </div>
  </div>
</div>

The following images show the intended result on Chrome and the unintended result on FireFox:

Chrome - Imgur
FireFox - Imgur

The blocks of color are just there to help visualise the different boxes.

Answer 1

The issue you have in your example is that the top padding applied to .streamRatio is being calculated in relation to the height of .streamContainer in Firefox but against the width of .streamRatio in Chrome (giving you the result you expect).

Which one is right? Well, as it turns out both implementations are correct:

Percentage margins and paddings on flex items can be resolved against either:

• their own axis (left/right percentages resolve against width,
• top/bottom resolve against height), or, the inline axis (left/right/top/bottom percentages all resolve against width)

A User Agent must choose one of these two behaviors.

CSS Flexible Box Layout Module Level 1 (Flex Item Margins and Paddings)

For this reason W3C suggests that you don't use percentage based padding on flex items.

To fix you will need to remove the flexbox functionality and vertically align the containers using a different method in this case using top: 50%; and transform: translateY(-50%);:

.streamContainer {
  background: blue;
  bottom: 0;
  box-sizing: border-box;
  height: calc(100% - 120px);
  position: absolute;
  transition: height 0.5s;
  width: 80%;
}
.streamRatio {
  background: red;
  box-sizing: border-box;
  display: block;
  height: 0;
  padding: 56.25% 0 0 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}
.streamInner {
  background: green;
  bottom: 0;
  height: 100%;
  left: 0;
  right: 0;
  position: absolute;
  top: 0;
}

<div class="streamContainer">
  <div class="streamRatio">
    <div class="streamInner">
      Content Goes Here
    </div>
  </div>
</div>