How to avoid overflow behavior on translated elements

Have you ever experienced that a CSS rule behaved differently than you would have expected it to?

Last week one of my students had such a mind-twisting CSS rule! This rule translated an element, but the rendered element behaved differently than expected. It was overflowing the parent.

He asked me why the element behaved like this after being translated and told me that the remaining space was defined to be distributed between the two elements by setting justify-content: space-between; which worked perfectly fine before the translation.

First, let's look at the transform property I said.
By using this property, elements can be translated: rotated, scaled, and skewed. But this effect will change the visual formatting model, which means that the position and shape of the affected content change. In other words, this affects the visual rendering of elements – but without disrupting the normal document flow.

Let's have a look at this overflowing behavior in your project, and see if we can help get your heads around what this behavior is caused by, and then understand how to solve it.

As mention earlier, everything worked as expected before translation. Rendering result before translated:

But when the elements are translated, they begin to overflow:

The transformation origin(Illustrated by the orange circles) is the point around which a transformation is applied. By default, the origin is center, but we can use the transform-origin CSS property to change the position of the origin.

When trying to skew the justified elements, they are forced to overflow because i.e. the visual rendering of the translated element does not affect the normal document flow.

Let us fix this by adjusting the origin of the left element to the upper left corner instead. For the element to the right, we change the position to the bottom right corner.

This will cause the element to use these new points of the elements as the origins and therefore rotation points:

And there you have it, a translated element without any overflow!

Happy Hacking
Troels Agergaard