Web features explorer

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.

Browser support

Chrome 129 Released on 2024-09-17
Chrome Android 129 Released on 2024-09-17
Edge 129 Released on 2024-09-19
Firefox Not supported Position: positive Bugs: 1896734
Firefox for Android Not supported Position: positive Bugs: 1896734
Safari Not supported Position Bugs: 274177
Safari on iOS Not supported Position Bugs: 274177

👍
35

Need this feature?
Leave a 👍 on the feedback issue
Don't forget to also leave a comment explaining your specific use case.

MDN documentation

`calc-size()` CSS function

Specifications

CSS Values and Units Module Level 5 (#calc-size), from Cascading Style Sheets (CSS) Working Group (W3C).

Usage (according to Chrome Platform Status)

~0.229% of page loads. More data at chromestatus.com.

Web Platform Tests (WPT)

View the latest WPT test results for this feature

Surveys

Developer use cases

I want to be able to animate a `<details>` being opened, not knowing the height of the content in it.
I want to be able to animate a `<details>` being opened, not knowing the height of the content in it. [see original comment]

View as JSON | Edit this feature | Report an issue | Web-features entry: source, dist