He visto esta pregunta y no he visto a nadie proporcionar esta respuesta. La solución que creé era perfecta para mi situación, así que pensé en compartirla. Esencialmente, tenía una página donde una lista generada se ocultó al principio al establecer la altura de CSS en "0" y luego se expandió al hacer clic con la altura de transición. Sin embargo, las transiciones no funcionarán con height = "auto". Así que investigué un poco y me di cuenta de que el atributo CSS "scrollHeight" aún se calculará a pesar de la "altura" o la "altura máxima". Así que configuré el evento "onclick" para cambiar la altura del elemento a "scrollHeight".
document.getElementById('dropContent').style.height = document.getElementById('dropContent').scrollHeight + 'px';Del libro CSS en profundidad:
Un valor no puede pasar de una longitud 0 a automática.
Lo que puede hacer es establecer una altura explícitamente, el problema es que tal vez no sepa cuál debería ser la altura. Eso solo se sabe una vez que los contenidos se configuran y representan en el navegador, por lo que deberá usar JavaScript para determinar la altura. Desafortunadamente, no hay otra solución.
Entonces deberías seguir usando element.scrollHeight .