Back to all features
Open for signals
CSS
calc-size()
The calc-size() CSS function computes mathematical expressions that include height and width keyword values, for example calc-size(fit-content, size / 2). Not to be confused with the calc() CSS function, which cannot use keyword values.
Modern Web Guidance
How Modern Web Guidance uses this feature
Combines calc-size() with interpolate-size to perform calculations and smooth transitions on intrinsic sizing keywords like auto, min-content, max-content, and fit-content.
Recommended fallback strategy
Declare interpolate-size: allow-keywords on :root and use calc-size(auto, size) for transitions to intrinsic dimensions. In browsers without support, the layout transitions jump directly to target heights without animating, or can be polyfilled using JavaScript scrollHeight measurements.
Community use cases (1)
What I want to do with this feature
I want to be able to animate a
<details>being opened, not knowing the height of the content in it.What I'm having to do in the meantime
It's not a blocker, but I have to use a fair amount of javascript and animate
max-heightto do something pretty basic.