Idriss Douiri 
Animating to height auto in CSS has never been that easy, and it involves using complex tricks to make it happen. But, with these new CSS features: interpolate-size and calc-size(), we can finally achieve a smooth transition to any Intrinsic size keyword (auto, fit-content, max-content, min-content).
Why You Want to Transition to Height auto?
Say you are working on an accordion layout for your FAQ section, you differently don’t want the content to appear and disappear suddenly, right?
Adding a subtle transition can enhance the user experience and give feedback about what content is being revealed and what is being hidden.
Sounds easy I know, until you try to make it yourself and get surprised knowing that you can’t animate the height from 0 to auto. Of course, there are other tricks to resolve this issue like animating max-height or flex-grow instead, which are not very flexible in most cases.
Thankfully modern CSS solves this problem by allowing us to transition the height and width properties to any intrinsic value like auto or fit-content.
What is Intrinsic Sizing in CSS?
In CSS, the intrinsic size of an element is the size naturally determined based on its content, it is the opposite of extrinsic sizing where the size is explicitly defined by the box model properties like width, height, padding, and borders.
Relying on intrinsic sizing makes your components more responsive and reusable with different content formats, as we don’t always know the exact width or height (the height most of the time) of an element.
Using interpolate-size property
Browser Support:
The interpolate-size property controls the interpolation between intrinsic and length values. It defaults to numeric-only, which doesn’t allow any transitions.
This property is not widely available for now, and only Chrome-based browsers support it, so it can be used as a progressive enhancement, which means browsers that don’t support it will fall back to the default with no transition without breaking the page.
By setting the interpolate-size property to allow-keywords, you allow the transition between <length-percentage> values and keyword values like auto.
the interpolate-size property can be inherited. So its recommanded to set it once at the document’s root and forget about it.
:root {
interpolate-size: allow-keywords;
}
Now that we have the interpolate-size set to allow-keywords at the document’s root, codes like this can work as expected:
.box {
height: 0;
transition: height 300ms;
}
.box.open {
height: auto;
}
Using calc-size()
Browser Support:
The calc-size() function is another powerful option for transitioning from or to intrinsic sizes. It allows you to perform calculations on intrinsic size values.
When using calc-size(), There is no need to set interpolate-size: allow-keywords for transitions to work, as the returned value can be animated.
Syntax
The calc-size() function accepts two arguments:
calc-size(<calc-size-basis>, <calc-sum>)
- calc-size-basis: an intrinsic size value like auto or fit-content, or a nested calc-size().
- calc-sum: the calculation to perform on the first argument. You can refer to the calc-size-basis with the size keyword.
Examples
width: calc-size(fit-content, size); /* pass the value without calculation */
height: calc-size(auto, size / 2 ); /* half the element's hight */
calc-size() or interpolate-size for intrinsic size transitioning?
Now that we have not one, but two ways of transitioning to or from intrinsic sizes, which one should we use?
Use interpolate-size: allow-keywords all the time. And only use calc-size() when you want to perform extra calculations.
Conclusion
As we’ve seen modern CSS introduces two new ways to deal with this common issue of animating the intrinsic sizes. Interpolate-size and calc-size, one is simple and the other is powerful.
