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

Estado: Solo Chrome 129; Firefox y Safari todavía no (2026-09). No es Baseline.  
Fuente: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/interpolate-size and https://caniuse.com/?search=interpolate-size  
Página: https://designforai.dev/es/css/interpolate-size

Actívalo con `interpolate-size: allow-keywords` y podrás transicionar `height: 0` a `height: auto` (o `max-content`); `calc-size(auto, size + 20px)` hace matemáticas sobre tamaños intrínsecos.

## HTML

```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>
```

## CSS

```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
}
```

Fallback: Sin soporte el panel se abre al instante; no hace falta protección porque la transición simplemente no interpola.

## Prompt

Para acordeones y paneles desplegables, pon `interpolate-size: allow-keywords` en `:root` y transiciona `height` entre `0` y `auto` (o usa `calc-size(auto, size)`); no uses hacks de `max-height: 9999px` ni trucos con grid-row. Firefox y Safari recurren a una apertura instantánea, lo cual es aceptable.