Open
Description
Describe the bug
DataGrid's scrollbar is not dragable.
I'm working on a page with title bar and sub-window.
In my real use case is that almost half of the viewport is available for DataGrid and I need multiple of it so it will need scrollbar.
The code below is the simplified version.
To Reproduce
- Create parent 'div' with height of '100vh'
- Add 'DataGrid' child with height greater than viewport to enable scrollbar
Link to code example:
<body>
<div style={{color: "white", backgroundColor: "#132132", height: "60px"}}>
Title bar
</div>
<div id="subWindow" style={{height: "calc(100vh - 60px)", overflow: "auto"}}>
{/* calculate reamaining viewport space (minus title bar height)*/}
{/* scroll bar should be on "subWindow" only*/}
<div style={{height: "500px", padding: "10px"}}>
<DataGrid
columns={columns}
rows={rows}
style={{blockSize: "100%"}}
/>
</div>
<br/>
<div style={{height: "500px", padding: "10px"}}>
<DataGrid
columns={columns}
rows={rows}
style={{blockSize: "100%"}}
/>
</div>
</div>
</body>Expected behavior
It works fine on Firefox.
Only happens when the parent/grandparent's scrollbar is visible
Environment
react-data-gridversion: 7.0.0-beta.36react/react-domversion: 18.2.0