Ag-Grid在flexbox布局中的高度为零

Question

我的目标是在Angular 5项目中使用ag-grid并让网格占用flexbox布局中的所有可用垂直空间。网格似乎很乐意使用＆＃34;身高：100％＆＃34;如果它包含在具有已定义像素高度的div中，或者当div具有百分比高度但在Flexbox布局中不是时。但是当我尝试在弹性项目中托管它时，似乎总是没有高度。

如何让我的网格扩展以占用其flex项目容器的高度？这里有一个关于我所看到和尝试的例子：https://embed.plnkr.co/D8YgM6/。

以下是我如何创建布局：

<div style="height:100%;display:flex;flex-direction:column;">
  <div style="height:250px;flex-grow:0;">
    <h5>Container div with specified height in pixels, ag-grid with percentage height</h5>
    <ag-grid-angular style="width: 100%; height: 80%" class="ag-theme-balham"
                     [columnDefs]="columnDefs"
                     [rowData]="rowData"
    >
    </ag-grid-angular>
  </div>
  <div style="flex-grow:1;">
    <h5 class="red">Container div using flex height, ag-grid with percentage height</h5>
    <p>How can I get the grid to be aware of my div's actual height?</p>
    <ag-grid-angular style="width: 100%; height: 80%;" class="ag-theme-balham"
                       [columnDefs]="columnDefs"
                       [rowData]="rowData"
    >
    </ag-grid-angular>       
  </div>
</div>

我希望第二个弹性项目中的网格具有合适的高度。我怎么能这样做？

Answer 1

在您的监听器中，将包含网格的项目的flex-basis设置为0，这可以实现您想得到的。我一直在努力解决这个问题：

  .item-1 {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 0;
  }

Plunker Screenshot running in Chrome

我不确定为什么这样行得通，也许对ag-grid有更深入了解的人可以发表评论？

Answer 2

尝试在网格就绪事件上设置自动高度

 this.gridApi.setDomLayout('autoHeight');

详细信息：https://www.ag-grid.com/javascript-grid-width-and-height/