[SOLVED] the frame form-group exceeds the grid ReactDataGrid

the frame form-group exceeds the grid ReactDataGrid

As you can see in the image attached, the frame exceeds the grid. how can I style the frame to match grid height or changing the height of the reactdatagrid to match with the height of the frame ?

Thank you

[

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>


<div className="row clearfix">
<br/> <div className="form-group">
                      <div style={{ width: '100%'}}>
                          <ReactDataGrid
                              ref='grid'
                              rowKey='id'
                              columns={this.state.columns}
                              rowGetter={this.rowGetterM.bind(this) }
                              rowsCount={this.props.motif.motifdetail.items.length}
                              onGridSort={this.handleGridSortM.bind(this) }
                              minHeight={500}
                          />
                      </div>
                  </div>
              </div>

Solution