height:auto is animatable now, so your max-height ceiling is a bug you can delete

Chromium 129 shipped `interpolate-size`, a property that tells the engine it may treat intrinsic keywords such as `auto`, `max-content` and `fit-content` as values it can animate toward instead of refusing on principle ^[9]. That reclassifies every `max-height` ceiling in your accordions and drawers: it is no longer a number to re-tune when content grows, it is a few lines to remove ^[2][11].

The reason the hack existed is worth being precise about, because it was not a skill issue. A CSS transition takes a start value and an end value and asks the engine to compute the frames in between, which only works if both ends are actual numbers; `auto` was never a number, it was an instruction to run layout and use whatever height comes out ^[7]. The engine could not interpolate toward an instruction it had not resolved yet, so its only options were to snap to the computed height or to decline the transition on that property ^[8]. Every workaround in your codebase exists to hand it a real number.

Both workarounds have a failure mode you have probably already paid for. The `max-height: 0` to `max-height: 500px` pattern passes review and then breaks quietly: when the real content reaches 640px, the panel clips the last two lines with no scrollbar and no error ^[2][3], which is 140px of content silently gone ^[14]. Bumping the ceiling to 9999px moves the cost somewhere less visible. An 80px panel now animates from 0 toward 9999 and merely arrives at its real height early, producing a pause you can see if you watch for it ^[4]. Assuming linear interpolation, that panel is done in about 0.8 percent of a 300ms transition, roughly 2.4ms, leaving about 297.6ms in which nothing on screen changes ^[15]. The JavaScript version is honest about reality, reading `scrollHeight` and writing it back as a pixel height ^[5], but it forces a layout read on every toggle, and a cached `scrollHeight` goes stale the moment an image loads or a thread grows inside an open panel, so you add a `ResizeObserver` to keep the number truthful ^[6]. A right number with its own maintenance schedule is still maintenance.

The replacement is `interpolate-size: allow-keywords` set once on `:root`, after which `height: 0` transitioning to `height: auto` behaves like a transition to `320px`, because the browser resolves the real computed height before the animation starts ^[10][11]. The default is `numeric-only`, the old behaviour, so adding the declaration does not change anything until you opt a page in ^[10]. If you need an intermediate stop rather than a flat open and close, `calc-size()` does arithmetic on an intrinsic keyword, with `size` standing in for the basis: `calc-size(auto, size * 0.7)` is 70 percent of the content's natural height ^[12].

Two things to watch. The source names only Chromium 129 and does not state support in other engines ^[16], so grep for round `max-height` numbers now but gate the deletion on your own support matrix rather than on the demo. And the author's own read is that almost nobody is using this yet ^[13], which means the pattern in your codebase is still the one every new hire will copy from the last panel they opened.