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

Question

我的目标是在 Angular 5 项目中使用 ag-grid，并使网格占据 flexbox 布局中的所有可用垂直空间。当网格包含在具有定义像素高度的 div 中或当 div 具有百分比高度但不在flexbox 布局中时，网格似乎很乐意使用“高度：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>

我希望第二个 flex 项中的网格具有适当的高度。我怎样才能做到这一点？

Answer 1

在你的plunker中，将包含网格的项目的flex-basis设置为0，这实现了我认为你想要的。我刚刚也在努力解决同样的问题：

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

在 Chrome 中运行的 Plunker 屏幕截图

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