interpolate-size
Animating height to auto, finally
The transition runs from 0 to auto. No measured pixels, no max-height guess, no resize maths — the thing the web could not do for twenty years.
Caveatheight: auto becomes animatable only after opting in with interpolate-size: allow-keywords — and the opt-in inherits. Put it on :root, as most examples do, and every intrinsic-size transition on the whole site changes behaviour in one line. Scope it to the component until that is a decision rather than an accident.
FallbackEngines without it ignore the declaration and the panel snaps open with no transition — exactly what the web always did, so it ships unguarded. The old max-height: 600px trick animates to a guess and pauses on nothing when the guess is wrong; this needs no guess.
.faq {
/* it inherits — scope it, not :root */
interpolate-size: allow-keywords;
}
.faq .panel {
height: 0;
overflow: clip;
transition: height .35s ease;
}
.faq.open .panel { height: auto; }Published