<calc-size> | CSS Types & Functions

An experimental function that allows performing math on 'intrinsic' sizes like 'auto', 'min-content', or 'fit-content'. This is a key part of making it possible to animate from 'height: 0' to 'height: auto'.

Quick example

.accordion-content {
  /* Experimental: allows math on 'auto' height */
  height: calc-size(auto, size);
  transition: height 0.3s ease;
}

<calc-size> Browser Support

Limited availability 70% global usage

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Not ready for production without a fallback.

View on caniuse.com → View on MDN → View on webstatus.dev → View spec → Learn more about Baseline →

129+