Text in a square box

Say you need to put content in a box that keeps persistant ratio but actual size is determined by the content.


Here is the markup:

<div class="c-box">
<div class="c-box__inner">
Lorem Ipsum

And here are the styles:

* { box-sizing: border-box; }

.c-box {
display: inline-block;

.c-box__inner {
width: 100%;
display: flex;
align-items: center;
margin: auto 20px;

&:before {
content: "";
padding-top: 100%;

Once Safari catches up, the .c-box__inner:before block can be replaced with aspect-ratio: 1 / 1.