Estoy intentando utilizar el componente IBM Gantt Chart en una aplicación React. El objetivo es lograr que el componente del diagrama de Gantt abarque toda la página, como se ve a continuación:

En mi código fuente JS, tengo la siguiente línea:

 return( <div id="ganttDiv"> <GanttChart config={config} /> </div> );

En mi CSS, configuré el ancho al 100% y el alto a 100vh. También puse bordes gruesos para determinar la extensión del div.

 #ganttDiv{ width: 100%; height: 100vh; border-color: rgb(102, 255, 0); border-style: dashed; border-width: 15px; background-color: rgb(255, 255, 255); }

En lugar del elemento React que abarca toda la página, obtengo:

Como puede ver, el div llena correctamente toda la página como se muestra con los bordes verdes, pero el contenido del div no se expande para llenar el espacio.

Después de investigar y mirar alrededor durante varias horas, aprendí que podía usar cajas flexibles.

Por lo tanto, agregué display: flex; a mi CSS, y ahora la altura parece correcta:

Desafortunadamente, el ancho ahora se reduce a menos de la mitad de la página en lugar de tener el 100% del ancho de antes.

Intenté seguir los ejemplos proporcionados por MDN Web Docs e intenté configurar el CSS en fila, fila inversa, columna y columna inversa, lo que no funciona.

Parece que solo puedo hacer que abarque todo el ancho o toda la altura, pero no ambos.

Espero que alguien pueda ayudar. Que tengas un lindo día. :-)

Editar: cuando lo compilo usando 100vw como sugirieron los demás, no hace nada. Sin embargo, si edito con las herramientas de desarrollo F12 el componente importado en sí (no el div), funciona. En la barra lateral, dice que el componente solo hereda el color del div, nada más. ¿Entonces qué debo hacer?