¿Por qué no se muestra mi contenido?

Realmente no estoy seguro de por qué mi contenido HTML no se muestra dentro de los divs.

Todo parece correcto, simplemente no se muestra el contenido.

Aquí hay un fragmento de código:

main { width: 100%; height: 100vh; display: flex; flex-wrap: wrap; justify-content: center; font-size: 0; /* Removes White space */ } header { width: 100%; height: 18vh; background-color: orange; font-size: 1.8em; } aside { width: 20%; height: 82vh; background-color: orange; margin: 0 auto; font-size: 1.2em; } section { width: 80%; height: 82vh; background-color: darkgrey; margin: 0 auto; box-shadow: 5px 5px 5px inset; font-size: 1.2em; }

   Just a random Header
 
  Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text
 
  Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text
 Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text
 Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text
 Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text

¿Alguna idea sobre cómo resolver esto? Sería realmente genial si mi contenido se muestra

Porque has establecido font-size: 0; en el envoltorio principal y no lo ha restablecido para los divs secundarios.

Por lo tanto, cuando se utiliza em (que es un valor proporcional basado en el tamaño de la fuente principal), 1.8em aún sería 0 porque 1.8 x 0 aún es 0.

No es necesario cuando se utiliza flexbox de todos modos. Sólo quítalo.

 * { margin: 0; padding: 0; } main { width: 100%; min-height: 100vh; display: flex; flex-wrap: wrap; justify-content: center; } header { width: 100%; height: 18vh; background-color: orange; } aside { width: 20%; height: 82vh; background-color: orange; } section { width: 80%; height: 82vh; background-color: darkgrey; box-shadow: 5px 5px 5px inset; }

   Just a random Header
 
  Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text
 
  Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text
 Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text
 Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text
 Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text

No sé por qué, pero el tamaño de la fuente main está aumentando el peso que la sección.

 main { width: 100%; height: 100vh; display: flex; flex-wrap: wrap; justify-content: center; /*font-size: 0; Removes White space */ } header { width: 100%; height: 18vh; background-color: orange; font-size: 1.8em; } aside { width: 20%; height: 82vh; background-color: orange; margin: 0 auto; font-size: 1.2em; } section { width: 80%; height: 82vh; background-color: darkgrey; margin: 0 auto; box-shadow: 5px 5px 5px inset; font-size: 1.2em; }

   Just a random Header
 
  Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text
 
  Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text
 Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text
 Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text
 Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text

Es porque los estás utilizando como unidades. Y em significa # times of current font size y su tamaño de fuente actual se establece en .main {font-size: 0}

 main { width: 100%; height: 100vh; display: flex; flex-wrap: wrap; justify-content: center; font-size: 0; /* Removes White space */ } header { width: 100%; height: 18vh; background-color: orange; font-size: 18px; } aside { width: 20%; height: 82vh; background-color: orange; margin: 0 auto; font-size: 16px; } section { width: 80%; height: 82vh; background-color: darkgrey; margin: 0 auto; box-shadow: 5px 5px 5px inset; font-size: 16px; }

   Just a random Header
 
  Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text
 
  Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text
 Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text
 Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text
 Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text

El problema es que establece el tamaño de fuente en 0 en .main. En el rest del código, estás usando ems.

El problema es que las unidades em se calculan en función del tamaño de fuente del elemento contenedor. A partir de entonces, 1 em = 1 unidad del tamaño de fuente de los elementos que lo contienen. Por lo tanto, ya que ha configurado el tamaño de fuente de los elementos que contienen a 0, entonces no importa lo que establezca en los otros elementos, siempre se mantendrá en 0, por lo que no mostrará su texto.

Intente cambiar el tamaño de fuente .main a 12px.

Intereting Posts

Oración que muestra la mitad al final del div, overflow: hidden está cortando la oración Ocultar el contenido debajo de la barra de navegación fija y transparente mientras se desplaza hacia abajo Forzar elemento div para que permanezca en el mismo lugar, cuando se desplaza la página Alinee hacia la izquierda en una forma compatible con HTML5 CSS no funciona en Safari – OK en Chrome, Firefox Combinación de CSS de relativo + fijo sin efecto de salto Resuelve el error de superposición de selección en IE6 No se puede eliminar el espacio en blanco en la parte inferior de mi documento