Intrinsic-size animation
Animating a panel open to whatever height its content happens to be, no hardcoded pixels. The 'animate to height auto' problem.
See it
What it is
The problem behind every accordion, disclosure panel, and expanding textarea: you want the box to animate open to exactly the height its content needs, and you do not know that number in advance. Classic CSS refuses, because 'auto' is a keyword, not a value it can interpolate, so people fake it with a max-height guess that either clips long content or leaves a lazy pause on short content.
Modern answers, cheapest first. interpolate-size: allow-keywords opts a subtree into transitions between a length and an intrinsic keyword, which is all you need for 'height: 0' to 'height: auto' on its own. calc-size() is a separate, related mechanism: it lets you do arithmetic on an intrinsic size ('calc-size(auto, size + 1rem)') and animate that result, so reach for it when you want an offset from auto rather than auto itself. Then there is the grid trick, animating grid-template-rows from 0fr to 1fr with the child set to overflow hidden; or measuring 'scrollHeight' in JS (ResizeObserver keeps it honest) and animating to that pixel value before setting height back to auto on completion. Radix and Headless UI ship the measured version as a CSS variable you animate against.
Gotcha: animating height is a layout property, so every frame re-runs layout for the subtree, which gets expensive fast on long or nested content. The 'overflow: hidden' you need for the clip also chops focus rings, box shadows, and dropdowns escaping the panel. And content that reflows during the animation (images without dimensions, fonts swapping in) will make the target height wrong halfway through.
Ask AI for it
Make this accordion animate open and closed to its content's natural height, with no hardcoded max-height. Use 'interpolate-size: allow-keywords' on the root, which on its own is enough to make 'height: 0' to 'height: auto' transition natively (no 'calc-size()' needed unless you want an offset from the intrinsic height). Fall back to the grid technique (grid-template-rows 0fr to 1fr, child with overflow: hidden and min-height: 0) where it is not supported. Duration 250ms, ease-out on open and ease-in on close, fade the inner content over the last 60 percent of the open. Keep the header focus ring visible (do not clip it), and collapse instantly under prefers-reduced-motion: reduce.