¿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

Predeterminado: objective con CSS Cómo centrar una información sobre herramientas horizontalmente en la parte superior de un enlace CSS Minimizer?MSIE 10, fuente web y configuración de características de fuente causa texto invisible ¿Cómo puedo diseñar una barra de navegación tipo Google+ usando material angular?Efecto de pin-board con CSS Usar input-group dentro de una forma en línea ¿Cómo usar la fuente “Monotype Corsiva” en la statement CSS?