I am attempting to utilize the IBM Gantt Chart Component in a React application. The goal is to get the gantt chart component to span the entire page as seen below:

In my JS source code, I have the following line:

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

In my CSS, I set the width to 100% and the height to 100vh. I also put thick borders to determine the extents of the div.

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

Instead of the React element spanning the entire page, I get:

As you can see, the div correctly fills the entire page as shown with the green borders, but the contents of the div don't expand to fill the space.

After researching and looking around for several hours, I learned that I could use flex boxes.

Therefore, I added display: flex; to my CSS, and now the height looks correct:

Unfortunately, the width now shrinks to less than half of the page instead of being 100% width from before.

I tried following the examples provided by MDN Web Docs and tried setting the CSS to row, row-reverse, column, and column-reverse which does not work.

It seems like I can only get it to span the entire width or span the entire height, but not both.

I hope that someone can help. Have a nice day. :-)

Edit: When I compile it with using 100vw as the others suggested, it doesn't do anything. However, if I edit with F12 developer tools the imported component itself (not the div), it works. On the sidebar, it says that the component is only inheriting color from the div, nothing else. So what should I do?