blog

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.

link: https://codepen.io/teodragovic/pen/poNOEBB?editors=1100

Here is the markup:

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

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.