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. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Overview
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. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
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.
Related links
Powered by web-features