Overflow: Scrolling causes hidden columns of the table to not be rendered. What went wrong?

Question

I'm integrating react-grid into an existing flask application. In order to do this I have to compile the application using a custom webpack configuration. I am able to render the react component successfully, but when I use react-grid and apply overflow: scroll, only the visible part of the table is rendered and the rest of the scroll area remains blank.

Click here to view the gif of React Grid with overflow scrolling enabled

Click here to view the gif of React Grid without overflow scrolling

Answer 1

I solved this problem. I set overflow:scroll in the browser by inspecting the element. Reactgrid seems to use a predefined width for calculation when the component is first rendered. Setting overflow: scroll in my CSS file and reloading the page solved the problem.