16: 9 lining trick not working as expected in FireFox

Question

I am trying to implement a responsive trick with a 16: 9 ratio for a block of content and, getting the expected result in Chrome, other browsers like FireFox and Edge display it in a completely different way 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 in Chrome and the unintended result in FireFox:

Chrome - Imgur
FireFox - Imgur

Blocks of colors are there to visualize various fields.

Answer 1

In your example, the problem is that the top add-on applied to .streamRatio is 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 turned out, both implementations are correct:

Percentage fields and gaskets on flexible elements can be allowed either:

• their own axis (percent left / right allowed in width,
• upper / lower resolution versus height), or built-in axis (left / right / top / bottom percent is allowed in width)

The user agent must choose one of these two types of behavior.

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

For this reason, W3C assumes that you are not using flex-based padding percentages.

To fix, you will need to remove the flexbox functionality and vertically align the containers using another 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> 

Answer 2

Moving the indent to the pseudo-element :: before the pseudo-element for .streamRatio will make it display correctly in Firefox and Edge.

 .streamRatio::before { display: block; content: ''; padding: 56.25% 0 0 0; }