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

This issue has been tracked since 2023-03-06.

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:

  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:

Expected behavior


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

Additional context

Taurlom wrote this answer on 2023-03-18

add min-height: 0 то .middle

More Details About Repo
Owner Name adazzle
Repo Name react-data-grid
Full Name adazzle/react-data-grid
Language TypeScript
Created Date 2015-03-06
Updated Date 2023-03-23
Star Count 5922
Watcher Count 129
Fork Count 2072
Issue Count 161


Issue Title Created Date Updated Date