CSS calc-size() Function

CSS calc-size() Function

The CSS calc-size() function performs calculations using intrinsic sizing values such as auto, min-content, max-content, and fit-content. Unlike calc(), it can calculate dimensions based on an element's natural size. It also supports transitions and animations involving intrinsic sizes, although browser support remains limited.

Syntax

calc-size(basis, calculation)

The function requires two comma-separated arguments: a size basis and a calculation.

For example:

.box {
  width: calc-size(fit-content, size + 40px);
}

This calculates the element's fit-content width and adds 40 pixels.

Other examples include:

width: calc-size(max-content, size + 20px);
width: calc-size(min-content, size * 2);
height: calc-size(auto, size + 30px);
width: calc-size(fit-content, size / 2);
height: calc-size(auto, round(up, size, 50px));

The keyword size represents the intrinsic dimension supplied by the first argument.

Unlike calc(), calc-size() cannot omit its first argument.

Parameters

The calc-size() function requires two parameters.

For example:

width: calc-size(max-content, size + 2rem);

Here, max-content is the basis, and size + 2rem is the calculation.

The calculation can use addition, subtraction, multiplication, division, and compatible CSS math functions.

The basis can also be a nested calc-size() expression, a compatible numeric calculation, or the special keyword any. These advanced forms are less common than intrinsic sizing keywords.

How It Works

The calc-size() function begins with an intrinsic size and modifies it using the supplied mathematical expression.

Consider an element whose natural content-based width is 180 pixels:

.box {
  width: calc-size(max-content, size + 40px);
}

The calculation becomes:

180px + 40px = 220px

The resulting width is 220 pixels.

If the content changes and its natural width becomes 240 pixels, the calculation produces:

240px + 40px = 280px

The browser determines the intrinsic size and applies the calculation during layout.

The function preserves the sizing behavior associated with its basis rather than simply converting every intrinsic keyword into an ordinary fixed length.

This distinction is important because values such as auto and min-content can behave differently depending on the layout.

Intrinsic Size Values

Intrinsic sizing keywords describe dimensions determined by an element's content or layout behavior.

Examples:

width: calc-size(min-content, size + 20px);
width: calc-size(max-content, size + 20px);
width: calc-size(fit-content, size + 20px);
height: calc-size(auto, size + 20px);
flex-basis: calc-size(content, size + 20px);

The resulting dimensions depend on the element's content, its containing block, and the sizing rules of the receiving property.

The content basis is not interchangeable with every sizing keyword in every CSS property.

The size Keyword

The keyword size is a special identifier used inside the second argument of calc-size().

It represents the value calculated from the first argument.

For example:

width: calc-size(max-content, size + 50px);

The browser calculates the max-content width and adds 50 pixels.

Other calculations include:

width: calc-size(max-content, size * 2);
width: calc-size(fit-content, size / 2);
height: calc-size(auto, size - 10px);

The keyword can also appear more than once:

width: calc-size(max-content, size + size / 2);

This produces one and a half times the basis size.

The size keyword is specific to the calc-size() calculation. It is not a general CSS variable and cannot be used independently:

width: calc(size + 20px);

This declaration is invalid because size has no meaning outside the appropriate calc-size() calculation.

Using Calculations

The calc-size() function supports the same basic arithmetic operators used in CSS calculations.

Calculations can also use other CSS math functions.

For example:

width: calc-size(fit-content, max(150px, size + 20px));

This uses the larger of 150 pixels or the intrinsic size plus 20 pixels.

Another example rounds the calculated height upward to the next multiple of 20 pixels:

height: calc-size(auto, round(up, size, 20px));

The final expression must produce a size compatible with the receiving property.

As with calc(), addition and subtraction operators require whitespace on both sides.

Transitions and Animations

One important feature of calc-size() is its ability to participate in transitions involving intrinsic sizes.

For example, a panel can transition from a fixed height to its natural content height plus additional space:

.panel {
  height: 40px;
  overflow: hidden;
  transition: height 0.4s ease;
}
.panel:hover,
.panel:focus-within {
  height: calc-size(auto, size + 20px);
}

In supporting browsers, the panel expands smoothly instead of jumping immediately to its new height.

Using calc-size() enables interpolation for the relevant intrinsic size calculation without requiring a separate interpolate-size declaration.

If no arithmetic adjustment is needed, the interpolate-size property is generally the simpler choice:

.panel {
  interpolate-size: allow-keywords;
  height: 40px;
  transition: height 0.4s ease;
}
.panel:hover {
  height: auto;
}

Neither approach permits transitions between every pair of intrinsic sizing keywords. For example, directly interpolating between min-content and max-content is not supported.

Animating dimensions may trigger repeated layout calculations, so avoid unnecessary animations on large or complex content.

Example

This example compares a normal content-sized box with a box that adds 40 pixels to its intrinsic width.

The second box uses calc-size() in supporting browsers and falls back to max-content elsewhere.

HTML:

<div class="calc-size-demo">
  <div class="calc-size-item">
    <span>max-content</span>
    <div class="calc-size-box">CSS Example</div>
  </div>
  <div class="calc-size-item">
    <span>calc-size(max-content, size + 40px)</span>
    <div class="calc-size-box calc-size-added">CSS Example</div>
  </div>
</div>

CSS:

.calc-size-demo {
  display: grid;
  gap: 20px;
}
.calc-size-item span {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
}
.calc-size-box {
  box-sizing: border-box;
  width: max-content;
  max-width: 100%;
  padding: 12px;
  background-color: #0066cc;
  color: #fff;
}
@supports (width: calc-size(max-content, size + 40px)) {
  .calc-size-added {
    width: calc-size(max-content, size + 40px);
  }
}

When supported, the second box is 40 pixels wider than its original max-content width, provided the available space does not constrain it.

In browsers without calc-size() support, both boxes use their natural content width.

Transition Example

The following example demonstrates a panel that expands to its content height plus 20 pixels when hovered or focused.

HTML:

<div class="calc-size-panel" tabindex="0">
  <strong>Hover or Focus to Expand</strong>
  <p>This panel expands to fit its content.</p>
  <p>The final height includes 20 extra pixels.</p>
</div>

CSS:

.calc-size-panel {
  box-sizing: border-box;
  width: 100%;
  max-width: 340px;
  height: 44px;
  overflow: hidden;
  padding: 12px;
  border: 1px solid #0066cc;
  background-color: #e8f2ff;
  transition: height 0.4s ease;
}
.calc-size-panel strong {
  display: block;
  line-height: 20px;
}
.calc-size-panel p {
  margin: 12px 0 0;
}
@supports (height: calc-size(auto, size + 20px)) {
  .calc-size-panel:hover,
  .calc-size-panel:focus-visible {
    height: calc-size(auto, size + 20px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .calc-size-panel {
    transition: none;
  }
}

In a supporting browser, hover over the panel or focus it using the Tab key. The height transitions from 44 pixels to its natural content height plus 20 pixels.

In unsupported browsers, the panel remains at its initial height because the advanced declaration is not applied.

calc() vs. calc-size()

Both functions perform mathematical calculations, but they accept different kinds of starting values.

For example, this is invalid:

height: calc(auto + 20px);

The calc() function cannot perform arithmetic directly on auto.

The corresponding calc-size() expression is:

height: calc-size(auto, size + 20px);

Use calc() for ordinary numerical calculations and calc-size() when a calculation requires intrinsic sizing behavior.

Common Uses

The calc-size() function is useful when an element's natural size must be adjusted mathematically.

For example, a content-sized label can receive additional width:

.label {
  width: max-content;
}
@supports (width: calc-size(max-content, size + 24px)) {
  .label {
    width: calc-size(max-content, size + 24px);
  }
}

The fallback preserves natural sizing in browsers that do not support calc-size().

Limitations

The calc-size() function has several important limitations.

• Browser support is limited, so production layouts should include appropriate fallback values.
• Both the basis and calculation arguments are required.
• The calculation must produce a compatible size value.
• It cannot combine different intrinsic sizing keywords into one arithmetic expression.
• The size keyword is only meaningful within the appropriate calc-size() calculation.
• Intrinsic sizing keywords are only valid where the receiving CSS property supports them.
• Transitions between two different intrinsic sizing keywords are not generally supported.
• Animating width or height can cause additional layout calculations.

For example, this is valid in supporting browsers:

width: calc-size(max-content, size + 20px);

However, the following is invalid:

width: calc-size(max-content);

The second argument is missing.

Likewise, the following is invalid:

width: calc-size(max-content, size + min-content);

Different intrinsic sizing keywords cannot be combined directly in the calculation.

For most conventional responsive sizing calculations, the widely supported calc(), min(), max(), and clamp() functions remain more appropriate.

Browser Support

The calc-size() function has Limited availability and is not part of Baseline because it is not supported in all major browser engines.

It is an experimental CSS feature. Browser compatibility should be checked before using it in production layouts.

Provide a supported fallback declaration before the advanced value:

.box {
  width: max-content;
  width: calc-size(max-content, size + 20px);
}

Browsers that do not recognize calc-size() retain the earlier max-content declaration.

You can also use @supports:

.box {
  width: max-content;
}
@supports (width: calc-size(max-content, size + 20px)) {
  .box {
    width: calc-size(max-content, size + 20px);
  }
}

For animations, provide a usable nonanimated state when the function is unavailable.

For current compatibility information, visit Can I Use? and search for calc-size().

Specifications

The calc-size() function is defined in the CSS Values and Units Module Level 5 and the CSS Box Sizing Module Level 4 .

The specifications describe how intrinsic sizing bases are combined with calculations and how compatible values can be interpolated during transitions and animations.

Related features include calc(), interpolate-size, min-content, max-content, and fit-content.