"We don't often set the height of elements that contain arbitrary content. We usually let elements like that be as tall as they need to be for the content. The trouble with that is we haven't been able to animate from a fixed number (like zero) to whatever that intrinsic height is (or vice versa). In other words, animate to auto (or other sizing keywords like min-content and the like)."
"If we don't want to use an opt-in like that, alternatively, we can use the calc-size() function to make the transition work without needing interpolate-size. This is the first time we've ever been able to do this in CSS. It's a relatively common need and it's wonderful to be able to do it so naturally, without breaking behavior. And it's not just height (it could be any property that takes a size) and it's not just auto (it could be any sizing keyword)."
Elements with arbitrary content typically size to their intrinsic height, making fixed-to-intrinsic animations impossible until now. Developers can opt in to animate to sizing keywords such as auto or min-content, or use calc-size() to perform transitions without opting into interpolate-size. This capability applies to any size-taking property and to any sizing keyword. Browser support currently targets Chrome, and the feature is suitable for progressive enhancement. Traditional fallbacks like animating max-height or off-screen measurement with JavaScript are inferior. Separate HTML-focused features include a popover attribute for open/close behavior with JavaScript APIs and invoke attributes for declarative access to those APIs, enabling functionality that works without JavaScript.
Read at Frontendmasters
Unable to calculate read time
Collection
[
|
...
]