Why does a CSS transition on `height` do nothing when the target value is `height: auto`, and which techniques actually produce a smooth open and close?

## Why the transition never starts A transition needs two endpoints it can blend. The browser takes the property's computed value before the style change and after it, and asks whether the property's animation type defines an interpolation between them. For `height`, the animation type is "by computed value" over lengths and percentages. `auto` is neither: it is a keyword that survives into the computed value and is only resolved to a used pixel value later, during layout. There is no defined halfway point between `0px` and `auto`, so the property is not animated and the new value applies at once. The same reasoning explains why `width: auto`, `max-height: none`, and `display: block` historically refuse to transition. This is worth stating precisely in an interview, because the wrong explanation — "the browser doesn't know the height yet" — sounds plausible and is not the mechanism. The browser knows the height perfectly well once layout runs; the problem is that the *computed value being interpolated* is a keyword. ## Technique 1: transition `max-height` ```css .panel { overflow: hidden; max-height: 0; transition: max-height 300ms ease; } .panel.open { max-height: 500px; /* must exceed the tallest content */ } ``` Both endpoints are lengths, so this interpolates. Its drawbacks are real and interviewers look for them: you must guess a ceiling, content taller than the guess is clipped, and — because the animation runs to `500px` while the content stops at, say, `180px` — the visible part of the motion finishes early on open and appears to pause before starting on close. Enlarging the ceiling makes the timing worse, not better. ## Technique 2: grid track from `0fr` to `1fr` ```css .wrapper { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms ease; } .wrapper.open { grid-template-rows: 1fr; } .wrapper > .content { overflow: hidden; min-height: 0; } ``` `0fr` and `1fr` are both `<flex>` values, so the track size interpolates, and a `1fr` row resolves to exactly the content height. There is no magic number and no clipping surprise. The `min-height: 0` on the child is required because a grid item's automatic minimum size would otherwise stop the row from shrinking below the content, and `overflow: hidden` keeps the content clipped while the row is short. ## Technique 3: `interpolate-size: allow-keywords` CSS added a way to opt into interpolating intrinsic size keywords: ```css :root { interpolate-size: allow-keywords; } .panel { height: 0; overflow: hidden; transition: height 300ms ease; } .panel.open { height: auto; } ``` `interpolate-size` is inherited, so setting it once at the root enables `auto`, `min-content`, `fit-content` and friends as transition endpoints throughout the document; internally the value is blended through `calc-size()`. As of 2026 this shipped in Chromium and is not yet available in Safari or Firefox, so treat it as progressive enhancement: browsers without it simply snap, which is an acceptable degradation. ## Technique 4: measure and set a pixel height The long-standing escape hatch is to read the content's rendered height from script, set that pixel value to start the transition, and clear it back to `auto` when the transition finishes. It is exact and works everywhere, but it moves layout knowledge into JavaScript and needs care around interrupted transitions — which is precisely why the CSS-only techniques above are preferred when they fit. ## Choosing between them If you control the wrapper markup and want exact content height today with broad support, the grid `0fr`/`1fr` technique is the strongest answer. `max-height` remains acceptable for small, bounded content such as a two-line hint. `interpolate-size` is where the platform is heading and is the right answer to "what does CSS do about this natively", with the support caveat stated. ## The general lesson The question is really about interpolability. Before reaching for a workaround, ask what the two computed values are and whether the property's animation type defines a blend between them. Length to length, colour to colour, number to number interpolate; length to keyword does not. That single test also predicts why `background-image: none` and `display: none` behave the way they do.