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

【问题标题】：Ag-Grid has zero height in a flexbox layoutAg-Grid 在 flexbox 布局中的高度为零
【发布时间】：2018-10-27 22:47:23
【问题描述】：

我的目标是在 Angular 5 项目中使用 ag-grid，并让网格占据 flexbox 布局中所有可用的垂直空间。当网格包含在具有已定义像素高度的 div 中或当 div 具有百分比高度但不是在 flexbox 布局中时，网格似乎很乐意使用“height:100%”。但是当我尝试将它托管在弹性项目中时，它似乎总是没有高度。

如何让我的网格扩展以占据其弹性项目容器的高度？这是一个 plunker，其中包含我所看到和尝试的示例：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>

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

【问题讨论】：

翻看相关的GitHub问题，看来还是有希望的：github.com/ag-grid/ag-grid/issues?utf8=%E2%9C%93&q=flex

标签： flexbox ag-grid ag-grid-ng2

【解决方案1】：

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

 this.gridApi.setDomLayout('autoHeight');

详情：https://www.ag-grid.com/javascript-grid-width-and-height/

【讨论】：

如果我理解正确的话，这不是一回事：它解决了网格高度为零的问题，但它会尝试根据内容调整网格大小（并且可能会导致性能损失对于大量行，因为它会尝试测量每一行），而不是将网格大小调整为可用高度的 100% 的默认行为。

【解决方案2】：

在您的 plunker 中，将包含您的网格的项目的 flex-basis 设置为 0，这实现了我认为您所追求的。我一直在努力解决同样的问题：

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

Plunker Screenshot running in Chrome

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

【讨论】：