CSS interpolate-size: Animate height: auto with a Fallback

Opt in at the narrowest useful scope#

The property is inherited. Set it at :root when the design system intentionally wants intrinsic-size animations, or on the component container when only one interaction needs the behavior:

1
:root {
2
  interpolate-size: allow-keywords;
3
}

The default is numeric-only. allow-keywords permits a numeric length or percentage to interpolate with supported intrinsic keywords such as auto, min-content, max-content, and fit-content. It does not make every pair of intrinsic keywords interpolable.

Animate a content panel#

Use a real state attribute that your component code updates alongside aria-expanded or the appropriate semantic state. The CSS below uses data-open so it can be adapted to a disclosure, accordion, or navigation panel:

1
.panel {
2
  height: auto;
3
  max-height: 0;
4
  overflow: hidden;
5
  transition: max-height 250ms ease;
6
}
7

8
.panel[data-open='true'] {
9
  max-height: 40rem;
10
}
11

12
@supports (interpolate-size: allow-keywords) {
13
  .panel {
14
    height: 0;
15
    max-height: none;
16
    overflow: clip;
17
    transition: height 250ms ease;
18
  }
19

20
  .panel[data-open='true'] {
21
    height: auto;
22
  }
23
}
24

25
@media (prefers-reduced-motion: reduce) {
26
  .panel {
27
    transition-duration: 0s;
28
  }
29
}

The fallback uses a max-height ceiling, so choose a value that safely contains the component’s expected content. It is a graceful visual fallback, not an invitation to hide arbitrarily large content. If the panel can grow without a reasonable ceiling, use a measured height in the unsupported path or accept an instant open/close.

The supported path transitions from the numeric 0 to the intrinsic auto keyword. Keep the panel in the layout while it transitions; applying the HTML hidden attribute at the same moment sets display: none and removes the transition opportunity. Your interaction code still needs to manage focus, keyboard behavior, and accessible state.

Use calc-size() for a calculated intrinsic end#

If the open state needs a small amount of extra space, calc-size() can combine an intrinsic size with a calculation:

1
@supports (height: calc-size(auto, size + 1rem)) {
2
  .panel[data-open='true'] {
3
    height: calc-size(auto, size + 1rem);
4
  }
5
}

You do not need calc-size() for the basic 0 to auto transition. Start with interpolate-size; reach for calc-size() when the final size really needs a calculation. Both features should keep the same fallback behavior for browsers that do not support them.

Know the interpolation boundary#

The property allows one <length-percentage> endpoint and one supported intrinsic keyword endpoint. These are reasonable pairs:

1
.card {
2
  interpolate-size: allow-keywords;
3
  height: 12rem;
4
}
5

6
.card[data-expanded='true'] {
7
  height: auto;
8
}

These are not magically solved by the property:

• auto to max-content, because both endpoints are intrinsic keywords
• an unsupported keyword in the browser you are testing
• content that is removed from layout before the transition starts
• an interaction that needs JavaScript to coordinate measurement, focus, or asynchronous content

Check the MDN interpolate-size reference for the current compatibility table and the Chrome explanation of animating to height auto for the underlying model.

Treat accessibility as a separate requirement#

CSS only animates the box. A disclosure button should expose its state with aria-expanded, reference the panel with aria-controls, and keep focus behavior predictable. Do not use a visual height animation to replace semantic HTML or to make a panel permanently invisible to keyboard and assistive-technology users.

Test at least these states:

1. Open and close with a pointer and keyboard.
2. Tab into the content while it is open.
3. Resize the viewport so the content needs more than the fallback ceiling.
4. Enable reduced motion and confirm the state still changes immediately.
5. Test an unsupported browser to make sure content remains usable without the transition.

If you are already using intrinsic sizing for form controls, the CSS field-sizing: content guide covers the related progressive-enhancement pattern. field-sizing changes preferred control size; interpolate-size controls how a supported size transition is calculated.

FAQ#