interpolate-size / calc-size() (animate to height:auto)

Nur Chrome 129; Firefox und Safari noch nicht (2026-09). Nicht Baseline.

Chrome 129Edge 129Safari noFirefox no

Aktiviere mit `interpolate-size: allow-keywords` und du kannst `height: 0` nach `height: auto` (oder `max-content`) transitionieren; `calc-size(auto, size + 20px)` rechnet mit intrinsischen Größen.

Animated open/close

Body that animates to its natural height in Chromium.

CSS

:root {
  interpolate-size: allow-keywords
}
.fx-049 {
  font-family: system-ui;
  max-width: 360px
}
.fx-049::details-content {
  height: 0;
  overflow: clip;
  transition: height .3s,content-visibility .3s allow-discrete
}
.fx-049[open]::details-content {
  height: auto
}

HTML

<details class="fx-049"><summary>Animated open/close</summary><div class="fx-049-body">Body that animates to its natural height in Chromium.</div></details>

Fallback: Ohne Unterstützung öffnet das Panel sofort; keine Absicherung nötig, weil die Transition einfach nicht interpoliert.

Quelle: developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/interpolate-size and https://caniuse.com/?search=interpolate-size

Prompt

Setze für Akkordeons und ausklappbare Panels `interpolate-size: allow-keywords` auf `:root` und transitioniere `height` zwischen `0` und `auto` (oder nutze `calc-size(auto, size)`); nutze keine `max-height: 9999px`-Hacks oder grid-row-Tricks. Firefox und Safari fallen auf ein sofortiges Öffnen zurück, was akzeptabel ist.