Padding-top in pseudo element won't work in Firefox (but does in Chrome, Safari) [duplicate]

Question

So, my goal is to have three square boxes whose sides expand/contract based on the size of the browser. Each box only contains one line of text, so the idea is to have a large amount of padding to fill in the extra space.

The site is built using flexbox, and I thought I had an elegant solution by using a :before to inherit the width of the parent element and use the length of it as a padding-top:

.square:before {
content:''; 
padding-top:100%;
}

This works perfectly in most browsers, but I was dismayed to see Firefox is having issues. Here's the rest of the code and a JSFiddle. Any suggestions?

http://jsfiddle.net/uLqqop0q/5/

Thee CSS~~

#container {
display: flex;
width: 100%;
flex-direction: row;
justify-content: center;
max-width: 1200px;
margin: 0 auto;
}

.square {
display: flex;
flex: 1 0 auto;
margin: 10px;
border: 10px solid blue;
justify-content: center;
align-items: center;
color: #111111;
font-size: 1.7rem;
height: auto;  
text-align: center;
vertical-align: middle;
}

.square:before {
content:''; 
padding-top:100%;
}

EDIT: Easiest fix—just add “display:table” to the pseudo element.

Answer 1

That's because you use a percentage.

With block layout, percentages in paddings are resolved according to the width of the containing block, even if the paddings are in the vertical direction.

However, flexbox wanted to change this behavior, and resolve the paddings according to the width or height of the containing block, depending on the direction of the padding.

However, browsers didn't agree. Then, Firefox resolves padding-top: 100% according to the height, and Chrome does it according to the width.

In the case of Firefox, since the height of the containing block depends on the height of the content, and the padding of the pseudo-element is part of the content, the percentage can't be resolved (it would be a circular reference). Then it becomes 0. This is analogous to the case of height: 100% in a block layout where the parent has height: auto.

You can fix it by using an explicit length instead of a percentage.