CSS calc-size() Function

The calc-size() function lets you perform calculations on intrinsic sizes and makes it possible to animate to and from them.

For years, one of the biggest frustrations in CSS was the inability to animate an element from height: 0 to height: auto. Because auto isn't a numeric value, browsers didn't know how to interpolate the frames between zero and the final height. Developers had to rely on JavaScript or hacky max-height workarounds to build simple accordions and dropdowns.

The calc-size() function finally solves this problem. It allows you to take an intrinsic sizing keyword (like auto, min-content, max-content, or fit-content) and treat it as a calculable number.

Here's an example of an expanding box. By transitioning the height to calc-size(auto, size), the browser can smoothly animate the element to its natural, content-driven height:

.accordion-header {
    background-color: #007bff;
    color: white;
    padding: 15px;
    margin: 0;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
  }

.accordion-content {
    background-color: #f8f9fa;
    /* Start with a height of 0 */
    height: 0;
    overflow: hidden;
    /* Smoothly transition the height */
    transition: height 0.4s ease-out;
  }
  
  .accordion-inner {
    padding: 20px;
    color: #333;
    line-height: 1.5;
  }

/* When hovering the container, animate to the natural auto height */
  .accordion-container:hover .accordion-content {
    height: calc-size(auto, size);
  }
  
  .warning-msg {
    font-family: sans-serif;
    font-size: 0.85em;
    color: #d9534f;
    margin-top: 15px;
    text-align: center;
  }
  
  /* Show a warning if the browser doesn't support calc-size() */
  @supports not (height: calc-size(auto, size)) {
    .accordion-container:hover .accordion-content {
      /* Fallback for older browsers so the content is at least visible */
      height: auto; 
    }
    .warning-msg {
      display: block;
    }
  }
  @supports (height: calc-size(auto, size)) {
    .warning-msg {
      display: none;
    }
  }
</style>

<div class="accordion-container">
  <div class="accordion-header">Hover to Expand</div>
  <div class="accordion-content">
    <div class="accordion-inner">
      This content is animating smoothly to its intrinsic <code>auto</code> height! Before <code>calc-size()</code>, this smooth transition was impossible without JavaScript or hard-coded pixel values.
    </div>
  </div>
</div>

<div class="warning-msg">
  <em>Note: Your browser doesn't support calc-size() yet, so the box will snap open instantly instead of animating smoothly.</em>
</div>

View Output Full Screen Preview

How It Works

The calc-size() function takes two arguments. The first argument is the intrinsic size basis (the keyword you want to base your math on). The second argument is the actual calculation.

Inside that second argument, you use the special keyword size to represent the basis you defined in the first argument.

For example, if you want an element to be exactly 50 pixels taller than its natural content height, you would write: calc-size(max-content, size + 50px). The browser figures out the max-content height, assigns that value to size, and adds 50 pixels to it.

If you just want to animate to an intrinsic size without doing any extra math (like in the example above), you simply write calc-size(auto, size).

Differences from `calc()`

You might be wondering why we can't just use the standard calc() function. The traditional calc() function strictly requires numbers, lengths, or percentages. If you try to write calc(auto + 50px), the CSS parser will consider it invalid and ignore the rule entirely. calc-size() was specifically created to bridge the gap between keyword sizing and mathematics.

Official Syntax

The official syntax of the calc-size() function is as follows:

Where <calc-size-basis> is defined as:

Possible Values

As indicated in the official syntax, the calc-size() function accepts two values:

calc-size-basis: The intrinsic size you want to use as the foundation for your calculation. This is typically a keyword like auto, min-content, max-content, or fit-content.
calc-sum: A mathematical calculation. Within this calculation, you use the keyword size to refer to the evaluated dimension of the basis.

CSS Specifications

The calc-size() function is defined in CSS Values and Units Module Level 5 (Editor's Draft)

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.