códigos y cuadro adjunto. Tuve que bifurcar una parte de mi otro código para obtener el comportamiento actual: https://codesandbox.io/s/compassionate-leavitt-cssformatting-p10w5

Estoy aprendiendo cómo utilizar correctamente los archivos CSS en mi proyecto reactJS, ya que intento utilizar el puerto de vista completa en los componentes para hacer que el contenido de la página se amplíe con el tamaño de la página. En este momento, tengo un problema con la ventana gráfica para Body, que no impide que mis otros componentes usen esa ventana gráfica como base.

El archivo CSS es bastante simple:

Use el cuerpo al 100%, y si hay 1 cuadrícula, use el 100% de la ventana gráfica, si hay 2, la mitad de una ventana gráfica cada una.

En index.js, estoy importando el css a través de la import "../cssfile.css" igual en el componente que genera las cuadrículas. Hay un poco de estratificación, ya que diferentes componentes se generan dentro de otros, y el que genera las cuadrículas es, eventualmente, el que genera la parte inferior de la estructura. Así es como se muestra el cuerpo:

entonces aquí está la pantalla de componentes. Observe que los componentes superiores están desplazados y solo las cuadrículas tienen aplicada la escala de la ventana gráfica.

¿Necesito aplicar el CSS de alguna manera diferente, o vincular los elementos al cuerpo de alguna manera para que utilice el tamaño de altura del 100% del cuerpo/html?