React element not expanding correctly in CSS Flex container

Question

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?

Have you tried width: '100vw' ? It should make it fully stretch according to the viewport width. — Alon Barenboim, Apr 02 '22 at 04:27
See edit to main post. Using 100vw has no effect. However, if I apply the property to the imported component using F12 developer tools, it works fine. — Hexyl Cinnamal, Apr 02 '22 at 04:57

score 1 · Accepted Answer · answered Apr 02 '22 at 05:08

To fix the problem, it was necessary to apply the width to the component itself, not the div. Unfortunately, the syntax for doing this with React is different since we use JSX instead of HTML.

Therefore, to the fix the problem I had to do:

          return(
            <div id="ganttDiv" >
              <GanttChart config={config} style={{width: '100vw'}} />
            </div>
          );

React element not expanding correctly in CSS Flex container

1 Answers1