In Chromium browsers React data table, right side columns flicker on a small screen or resizing a browser

Question

I am using the Npm package React data grid https://github.com/adazzle/react-data-grid to bind data.

Issue example https://codesandbox.io/s/react-data-grid-example-9sb93?file=/src/App.tsx

In a small screen size system or resizing the browser, the right side of the columns started flickering.

Table column flickering only comes in chromium-browser

Does anyone have a solution?

Answer 1

Not sure but works for me

Table flicker issue came because of table height that is something like

height: "calc(100vh - 11rem)"

to fix the flicker in chromium-browser, I added overflowX to scroll with height

{ height: "calc(100vh - 11rem)", overflowX: "scroll" }