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

Question

我的目标是在 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>

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

Answer 1

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

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

Plunker Screenshot running in Chrome

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