Padding-top in a pseudo-element will not work in Firefox (but in Chrome, Safari)

Question

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

The site was built using flexbox, and I thought I had an elegant solution using: before to inherit the width of the parent element and use its length as a complement:

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

This works fine in most browsers, but I was alarmed that Firefox was having problems. Here is the rest of the code and 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: - "display: table" .

Answer 1

, .

, paddings .

flexbox .

. Firefox padding-top: 100% , Chrome .

Firefox, , , ( ). 0. height: 100% , height: auto.

, .