Cita: El 100% de la pantaia a lo largo, suponiendo que si el contenido crece a lo largo, el 100% debe ser maior que cuando comienza...
No, le has dicho que ocupe el 100% para siempre, sin excepciones. Así que como es muy obediente es lo que hace. Cuando le das ese tamaño, no es un tamaño mínimo ni máximo, es ese exactamente.
Algo que seguramente ya sepas:
El tamaño en porcentaje siempre tiene que tener un valor concreto como referencia. Y por la ley de la herencia en css, toma ese valor respecto a su ancestro más próximo que tenga definido un tamaño.
En tu caso, #principal con su "
height:100%; width:100%;" busca el valor de referencia para calcular su tamaño en su padre (body), pero como también es 100%, se remonta a su abuelo, que en este caso es "
html" que también es "
height:100%; width:100%;", valor que el navegador calculará de la única referencia que le queda, la ventana del navegador.
A groso modo, y sin tener en cuenta otros factores o elementos que influyan, si quieres que una caja aumente de tamaño según el contenido que aloja, no le definas medidas.
Celebro que solucionases tu incidencia.
Un saludo, Anymations