calc-size()
Limited availability
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
Need this feature?
Leave a 👍 on the feedback issue
Don't forget to also leave a comment explaining your specific use case.
MDN documentation
Specifications
Usage (according to Chrome Platform Status)
~0.340% of page loads. More data at chromestatus.com.Web Platform Tests (WPT)
View the latest WPT test results for this featureSurveys
- State of CSS 2026 > usage > favorite new features
- State of CSS 2026 > usage > css interoperability features
- State of CSS 2026 > reading list > reading list
- State of CSS 2026 > layout > layout pain points features
- State of CSS 2026 > layout > layout pain points
- State of CSS 2026 > all features > all features
- State of CSS 2025 > usage > css interoperability features
- State of CSS 2025 > reading list > reading list
- State of CSS 2025 > features > all features
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