interpolate-size enables transitions between intrinsic sizing keywords such as auto, min-content, max-content, and fit-content, allowing animations to computed sizes like height:auto. Browser support remains incomplete, so progressive enhancement or feature queries help provide fallbacks. A practical technique uses interpolate-size on :root, computes heights using the computed line-height value, and accounts for padding with configurable custom properties like --calculated-details-padding and --details-padding fallback to 1em. Applying a linear transition produces a snappy animation. Unknown properties are ignored by browsers that lack support, enabling safe deployment of interpolate-size while retaining functional fallbacks.
An often requested CSS feature is the ability to animate to height: auto. A slight variation of that request is to transition the width property instead of the height, or to transition to any of the other intrinsic sizes represented by keywords like min-content, max-content, and fit-content. We've been asking for this since before I even started writing CSS [checks notes] nearly 18 years ago [sobs].
One of my favourite CSS features is that if your browser doesn't yet understand a property it'll effectively be ignored. That's a really good feature! Let me show you how I'd approach the same problem and give you a nice easy to copy snippet. First up, doing the same as Bramus, let's pop the interpolate-size declaration up in the :root. Let's add the rest of the CSS code and then I'll break it down for you.
Collection
[
|
...
]