calc-size()

[github-actions]

This GitHub issue is for collecting web developer signals for 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.

Browser support

• Chrome 129 (Sep 17, 2024)
• Chrome Android 129 (Sep 17, 2024)
• Edge 129 (Sep 19, 2024)
• Firefox: not supported
• Firefox for Android: not supported
• Safari: not supported
• Safari on iOS: not supported

Give us feedback

If you're pressed for time, but you want this feature to be available in all browsers, please give this issue a thumbs up 👍 reaction.

However, a much better guide for us is to know how you'd use this feature, and what you're having to do in the meantime. This helps us judge the priority versus other features.

Copy the template below in a comment, and add the details that matter to you.

## What I want to do with this feature

<!-- Add your specific use-cases, even if they seem obvious to you. -->

## What I'm having to do in the meantime

<!--
Are you having to use another feature instead, a polyfill, or is it blocking you completely?
Why are the alternatives worse than using this feature?
-->

All comments are expected to adhere to the Code of Conduct.

Learn more

You can learn more about this feature here:

• web features explorer
• webstatus.dev
• Specification

[aarfing]

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-height to do something pretty basic.