Solving Shrinkwrap: New Experimental Technique

Solving Shrinkwrap: New Experimental Technique

In this article, I present my new technique for solving a CSS problem that was deemed impossible — true shrinkwrapping of an element with auto-wrapped content. By using anchor positioning and scroll-driven animations, we can adjust our element’s outer dimensions by measuring its inner contents, demonstrating that for many cases this can already work and might unlock a future native feature.

CSS is Awe­some CSS is Awe­some

Toggle to a videolive example On the left: an element that wraps without shrinkwrap fix. On the right: the box is tightly wrapped with a fix and centered. Resizing the example demonstrates what the problem looks like in a dynamic context.

Since anchor positioning and scroll-driven animations appeared on my radar, I knew they would unlock things that were not possible before. These new CSS features hook into many things that were previously either impossible or available only through cumbersome JavaScript APIs. Two years ago, I wrote about one of such things — the “shrinkwrap” problem and a partial decorative workaround that used anchor positioning — in my “The Shrinkwrap Problem: Possible Future Solutions” article.

After writing that article, and experimenting more with scroll-driven animations, I knew that there could be a way to combine those and achieve shrinkwrapping not just visually, but also make it affect the layout. In the last few months, I was experimenting with my past findings and a few novel approaches, and, finally, honed them into something reusable — and already working in stable Chrome and Safari, with a graceful degradationGo to a sidenote for other browsers.

Side note: It really helps that this technique is mostly decorative: when it doesn’t work well, things do not look as good, but everything still works. It is pretty similar to features like text-wrap: balance , where it can be used to improve some existing designs or make new ideas possible, while not compromising on the functionality. Jump to this sidenote’s context.

Disclaimer anchor

That said, even though my examples for the base technique might work in the latest versions of some stable browsers, the technique itself is highly experimental.

For example, I experienced occasional crashes in Safari. I managed to find a workaround, but I strongly suggest being careful before using anything from this article in production.

... continue reading