CSS: animar height de 0 a «auto» con transition

Es muy común que queramos hacer en css una transición de un determinado height a «auto«. Aclaro que el título del post no es muy apropiado, ya que realmente no se consigue una transición con valor auto en la altura del elemento.

Es más que nada porque es el valor que se puede pensar en un primer momento para realizar esta animación, pero vemos que nos queda un efecto plano.

Para conseguir ese efecto con una transicón necesitamos hacer uso de la propiedad max-height, con el valor inicial que queramos, y en el :hover le pondremos un valor más alto de lo que puede contener el alto dela caja.

Un ejemplo:

.caja{
    max-height: 20px;
    overflow: hidden;
    transition: max-height 0.6s;
  }
.caja:hover{
	max-height: 500px;
}

Demo: