I am aiming to create three square boxes that adjust their size based on the browser's dimensions. Each box will contain only one line of text, so I plan to use padding to fill any extra space.
My website utilizes flexbox, and I initially thought I had found a clever solution by using a :before pseudo-element to inherit the width of the parent element and set the length as padding-top:
.square:before {
content:'';
padding-top:100%;
}
While this method works well in most browsers, I discovered an issue in Firefox. Below is the complete code and a link to a JSFiddle. Any advice or suggestions would be greatly appreciated.
http://jsfiddle.net/uLqqop0q/5/
The CSS styles:
#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%;
}
UPDATE: A simple fix involves adding "display: table" to the pseudo-element.