`interpolate-size`: animate `height: auto` without hacks

Learn how to transition intrinsic sizes such as `height: auto` with native CSS, when to use `interpolate-size`, what problem it solves and how to leave a reasonable fallback.

How much do you know about CSS?

📘 Theory

What problem it actually solves

CSS always knew how to reach `auto`, but it did not know how to draw the path in between.

A transition needs two interpolable values. `height: 0` and `height: auto` did not fit together well because `auto` is not a fixed number but a layout result.

That is why so many components fell back to `max-height: 999px` or runtime `scrollHeight` measurements through JavaScript. They worked, but usually with arbitrary limits or maintenance costs.

Classic hack: `max-height` with an invented upper limit.
JavaScript fallback: measure content and write pixels at runtime.
Modern option: allow the browser to interpolate intrinsic keywords directly.

Base syntax and where to apply it

You usually declare it on the context where you want keyword interpolation to be allowed.

The important detail is `allow-keywords`. Without that instruction, the browser still treats those changes as non-interpolable.

It combines especially well with `overflow: clip` so the content does not spill out during the visual transition.

Cases where it adds real value

Not every block needs a height animation, but repeated UI patterns benefit a lot from it.

FAQ and accordions

The content can grow or shrink without you recalibrating a fake maximum height every time.

Ecommerce filters

Expandable groups change with the number of options and do not always fit inside a sensible fixed height.

Expandable cards

A short summary can become a richer content block with lists, links or metrics without breaking the transition.

Fallback and compatibility judgment

A modern rule does not remove the need to think about browsers that are still behind.

If the interface remains usable without the animation, you already have a solid base. Then you can progressively enhance with `interpolate-size` where support exists.

When the animation is secondary, the healthiest fallback is often to accept an instant open and close. Going back to the `max-height` hack is only worth it when the smoothness is truly central to the experience.

1 What problem it actually solves 2 Base syntax and where to apply it 3 Cases where it adds real value 4 Fallback and compatibility judgment

🧪 Learn by doing

Example Interactive demo: real before and after Compare an accordion solved with `max-height` against one that animates `height: auto` through `interpolate-size`.

⌄

🏁 Challenges

Challenge Challenge: open a panel all the way to `auto` Enable keyword interpolation and let the open panel reach its real height.

⌄

🧰 Resources

Useful links

MDN - interpolate-size MDN - Intrinsic size values

Test

Check your knowledge with a test about CSS.

Test for CSS

Course resources 78

📘 Glossary 🎧 Audio 📄 PDFs 🖼️ Infographics 🎬 Videos 🔗 Links 🧠 Flashcards 🧩 Snippets

‹

Lesson 48

`@property`: typed and animatable custom properties

Lesson 50

Modern scroll: snap, sticky and scroll-guided motion

›