Как сделать так, чтобы ag-grid просто помещался внутри контейнера

Question

Я начинаю с реагировать на ag-grid, и кажется, что учебники, которые предоставлены, жестко запрограммированы и имеют высоту:

            <div
                className="ag-theme-balham"
                style={{ height: '200px', width: '600px' }}
            >
                <AgGridReact
                    columnDefs={this.state.columnDefs}
                    rowData={this.state.rowData}>
                </AgGridReact>
            </div>

Если я удаляю спецификации ширины и высоты, сетка просто не отображается,Я действительно не хочу иметь магические цифры размера. Если я использую Bootstrap или Material CSS, и у меня есть понятие класса «центрированный контейнер» с некоторыми элементами управления в нем, я хотел бы, чтобы сетка была такого размера контейнера - это возможно? Я вообще не знаю CSS - вроде вырезания и вставки примеров, но, по сути, я хочу серию элементов управления вводом, центрированных на моей странице вертикально - и ag-grid среди них. это не похоже на проблему со «стандартными» html-входами / кнопками, но ag-grid - другой зверь. спасибо

Answer 1

Примерно так:

<div style={{height: '500px', width: '100%', position: 'absolute'}}>
    <div className="ag-theme-balham" style={{height: '100%'}}>
        <AgGridReact gridOptions={gridOptions}/>        
    </div>
</div>

Здесь высота сетки всегда будет равна высоте внешнего div.