interpolate-size

Transitioning height from 0 to auto has been a CSS sore spot for fifteen years. The browser doesn't know what number to interpolate toward, so the value snaps. interpolate-size: allow-keywords is the official fix - one rule, applied to an ancestor, that opts a subtree into interpolating between lengths and intrinsic size keywords (auto, min-content, max-content, fit-content).

The transition declaration on both panels is identical: transition: height 200ms. The only difference is that the right panel sits inside a wrapper that flips the switch:

:root {
  interpolate-size: allow-keywords;
}

The property inherits, so a single declaration on :root opts the whole document in. It covers every sizing property - width, height, the min-/max- variants, flex-basis - so the same one-liner unlocks expand-to-fit cards, drawers, and rails, not just accordions. The old hacks it retires: max-height set to a magic ceiling, the grid-template-rows: 0fr → 1fr trick, JS measuring scrollHeight.

Default behavior is numeric-only, which treats a length-to-keyword transition as discrete - the value snaps to the target at the halfway point of the duration. allow-keywords upgrades it to a continuous animation by resolving the keyword to a length on every frame.