1 CSS calc-size() Examples

This updated collection introduces the long-awaited solution to one of web design’s oldest problems: animating to height: auto. For years, developers relied on JavaScript hacks or “magic number” max-height transitions to reveal dynamic content. With the new CSS calc-size() function, you can now perform mathematical operations on intrinsic values - like auto, max-content, and fit-content - enabling smooth, native transitions for accordions, dropdowns, and dynamic modals without a single line of script.

Technically, calc-size() works by establishing a “basis” (the intrinsic size) and allowing you to modify it, for example: width: calc-size(auto, size + 2rem). This function is tightly coupled with the interpolate-size property, effectively unlocking the browser’s ability to interpolate between a fixed length and a keyword. Unlike traditional calc(), which breaks on non-numeric values, these snippets leverage the layout engine directly to calculate the final geometry, ensuring accurate animations even when content changes dynamically.