(Chrome) Scrollbar not working when parent/grandparent's scrollbar is visible

Open holospice18 opened this issue 1 year ago • 0 comments

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-grid version: 7.0.0-beta.36
react/react-dom version: 18.2.0

Mar 04 '24 07:03 holospice18