calc-size()
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The calc-size() CSS function allows you to perform calculations on intrinsic size values such as auto, fit-content, and max-content; this is not supported by the regular calc() function.
calc-size() return values can also be interpolated, enabling size keyword values to be used in animations and transitions. In effect, including calc-size() in a property value automatically applies interpolate-size: allow-keywords to the selection.
Note however that interpolate-size is inherited, therefore applying it to an element enables interpolation of intrinsic size keywords for every property applied to that element and its children. As a result, interpolate-size is the preferred solution for enabling intrinsic size animations. You should only use calc-size() to enable intrinsic size animations if they also require calculations.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
calc-size Experimental | 129 | 129 | | | 129 | |
Syntax
.panel {
height: calc-size(auto, size);
transition: height 0.3s;
}
.panel.collapsed {
height: 0;
}Live demo
Use cases
-
Use calc-size()
Use calc-size() when the default CSS behavior is not expressive enough for the component or layout you are building.
-
Handle edge cases
Apply calc-size() to solve a specific styling constraint without introducing broader layout or behavior changes.
Cautions
- Test calc-size() in the browsers you support, especially if it changes layout, text handling, or interaction behavior.
- Plan a fallback or acceptable degradation path when support is still limited.
Accessibility
- Confirm that using calc-size() does not make content harder to perceive, understand, or operate in assistive contexts.