A new CSS feature to easily animate to height/width auto with no complex code

CSSTip serves as a treasure trove of knowledge for frontend developers striving to master the art of Cascading Style Sheets (CSS). Through concise tips, detailed tutorials, and creative demonstrations, readers embark on a journey to harness the full potential of CSS for web design and development. From responsive layouts to  animations, CSSTip empowers developers to create visually stunning and user-friendly web experiences.

CSS Tip

Learn how to smoothly transition to `height: auto` using just three lines of code. The key is the `interpolate-size: allow-keywords` property. Compatible with the latest version of Chrome.

Animate to height/width auto (without hacks)

Hallelujah! Can’t wait until this has wider browser support!

There’s an ongoing proposal in the csswg that’s suppose to be the official way to do this.
<a href="https://github.com/w3c/csswg-drafts/issues/626" target="_blank" rel="noopener nofollow">https://github.com/w3c/csswg-drafts/issues/626</a>
Based on the discussion among the member, seems like they have found a solution to do this, by introducing the new <code>calc-size()</code> function.