The CSS interpolate-size property allows a page to opt in to animations and transitions of CSS intrinsic sizing keywords such as auto, min-content, fit-content, etc. A common use case is to transition between height: 0 and height: auto, for example in accordion components.

:root {
    interpolate-size: allow-keywords; 
}

Closely related is the new calc-size() function, which allows you to perform calculations on intrinsic size values (not supported by the regular calc() function).

.foo {
  width: calc-size(min-content, size + 100px);
}

These features are supported in Chrome v129.

References:

• https://developer.chrome.com/docs/css-ui/animate-to-height-auto
• https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/calc-size