diferencia entre la altura de css: 100% vs altura: auto

Me hicieron una pregunta en una entrevista que “¿cuál es la diferencia entre la height:100% css height:100% y height:auto ?”

¿Alguien puede explicar?

height:100% implica que el elemento va a tener el 100% de altura de su contenedor principal.

height:auto significa que el elemento tendrá una altura flexible, es decir, su altura dependerá de la altura de los elementos infantiles de la misma

Considere el siguiente ejemplo:

altura: 100%

 

#innerDiv va a tener height:50px

altura: auto

 

ahora el #innerDiv va a tener height:10px

Una altura del 100% para es, presumiblemente, la altura de la ventana interna de su navegador , porque esa es la altura de su elemento principal , la página. Una altura auto será la altura mínima necesaria para contener .

El valor predeterminado es height: auto en el navegador, pero height: X% Define el alto en porcentaje del bloque que lo contiene.