Curso gratuito de CSS
Animar tamaño intrínseco

interpolate-size para transicionar hasta auto

La diferencia importante no es visual sino arquitectónica: antes había que simular height: auto con trucos como max-height; ahora el navegador puede interpolar keywords intrínsecas de forma nativa.

.accordion {
  interpolate-size: allow-keywords;
}

.panel {
  height: 0;
  transition: height 320ms ease;
}

.is-open .panel {
  height: auto;
}
Patrón antiguo · max-height
El DOM es la representación estructurada del HTML que el navegador expone a CSS y JavaScript para pintar, consultar y actualizar la interfaz.
Es el árbol de reglas y estilos calculados. Junto al DOM forma el render tree que acaba en pantalla.

Funciona, pero obliga a adivinar un máximo razonable.

Patrón nuevo · height: auto
El Browser Object Model agrupa APIs del entorno del navegador como window, historial, ubicación, temporizadores o tamaño de pantalla.
Es la unión práctica entre estructura y estilo. Solo incluye nodos visibles y sirve de base para layout, pintura y composición.

Aquí no hay alturas mágicas: el navegador mide y anima el tamaño real del contenido.