Transition Elements to Auto Height with the “interpolate-size” CSS Property

CSS has gained a bunch of really useful features in the last decade, from grid and flexbox for layouts to code nesting and container queries. (For more, watch Adam Argyle’s CascadiaJS 2025 presentation.) Thus, it can be surprising to encounter something that CSS should be able to do but for some inexplicable reason, can’t.

A perfect example is transitioning an element to its full height. That seems straightforward enough until you actually try to do it. Consider this scenario: You’re building an FAQ section on a page using the <details> element to create an accordion widget without any JS.

Although the above code works well enough, it’s a bit jarring when the FAQ items suddenly appear or disappear when they’re clicked on. It’d probably look nicer if they actually expanded and collapsed before your eyes. Which means we need to find a way to transition each FAQ item’s height from 0 to its full height, whatever that might be.

That sounds easy enough until you realize that each item’s height will vary depending on how much content it contains. (In the above example, “FAQ Item 2” is quite a bit longer, and therefore taller, than its siblings.) You can’t simply change all of the items to a single specific height. Instead, you need to transition their height from 0 (an actual value) to auto (an abstract keyword).

In the past, you might reach for some JS to calculate an individual item’s maximum possible height and then transition its height from 0 to that value. That, or rely on some clever, if imperfect, CSS workaround. But all of those are not without drawbacks. Which brings us to the interpolate-size property.

Announced just over a year ago, this relatively recent property lets you change what types of values CSS will use when calculating and adjusting an element’s size. It defaults to numeric-only, which, as the name suggests, only accepts numeric values. But if you set interpolate-size to allow-keywords, that opens up some intriguing possibilities.

That’s much nicer and smoother. If you compare the CSS of the two examples, you’ll see some additional code in the second one, but all of it hinges on interpolate-size: allow-keywords; being added to the <details> element.

The applications for this extend beyond accordions to dropdown menus, action buttons, and basically anywhere you want to modify an element’s size but can’t predict what its final size will be. (Josh Comeau and Bramus go into much greater detail concerning how to use interpolate-size and what’s possible with it.)

Unfortunately — you just knew an “unfortunately” was coming, didn’t you? — browser support is currently limited to Chromium-based browsers like Chrome, Edge, and Opera. Requests to add interpolate-size support to Firefox and Safari do exist, though, which hopefully means that it’ll be coming to those browsers sooner rather than later.

In the meantime, interpolate-size is still worth exploring and even using in a progressive manner, as explained by Andy Bell, because it handily solves a simple problem that’s been plaguing web developers for far too long.