How to set react-data-grid fill div with flex layout

[park365]

Describe the bug

I want to make the react-data-grid fit a div with flex layout. In this layout, drag window, react-data-grid could resize follow the window and colud show horizon/vertical bar.

To Reproduce

Look at this demo: https://codesandbox.io/s/exciting-jerry-50ygp1?file=/src/App.js:4645-5199

1. middle is a flex:1 div
2. fill-grid: a. set block-size: 100% will fill window height, but it will cover othe div like top/bottom in the example b. when i set fixed height , react-data-grid display as i expected, but this i should manual calculate div height.

Link to code example:

https://codesandbox.io/s/exciting-jerry-50ygp1?file=/src/App.js:4645-5199

Expected behavior

Environment

• react-data-grid version: 7.0.0-beta.25
• react/react-dom version: 18.2.0

Additional context

[Taurlom]

add min-height: 0 то .middle

[mangal1sagar]

add min-height: 0 то .middle its only working for main , header and sidebar still not working in demo given by @park365 . can you please help