Angular 5中Ag-Grid在Flexbox布局下高度为0的解决方法

这个问题其实是flex布局和百分比高度配合时的常见坑——当你把Ag-Grid放在一个flex-grow:1的容器里时，这个容器本身并没有明确的高度值，导致Ag-Grid的height:80%找不到可以参照的父元素高度，最终只能显示为0。

解决方案 #

你需要给这个flex item容器添加明确的高度参照，或者改用flex布局让Ag-Grid自动填充空间，这里有两种可行的方法：

方法一：给flex item容器设置height: 100%

因为父容器是flex-direction:column的flex容器，它的高度是100%，所以给子flex item设置height:100%后，Ag-Grid的百分比高度就能找到正确的参照了：

<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>
  <!-- 给这个flex item添加height:100% -->
  <div style="flex-grow:1; height:100%;">
    <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 item容器改用flex布局，让Ag-Grid自动填充

另一种更贴合flex布局思路的方式是，把flex item容器也设置为flex容器，让Ag-Grid通过flex-grow:1来占据剩余空间，这样就不用依赖百分比高度了：

<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>
  <!-- 将这个容器设置为flex布局，方向垂直 -->
  <div style="flex-grow:1; display:flex; flex-direction:column;">
    <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添加flex-grow:1，让它填满剩余空间 -->
    <ag-grid-angular style="width: 100%; flex-grow:1;" class="ag-theme-balham" [columnDefs]="columnDefs" [rowData]="rowData" >
    </ag-grid-angular>
  </div>
</div>

原理说明 #

在flex布局中，flex-grow:1只会让元素占据容器的剩余空间，但不会给它设置明确的height值。而CSS的百分比高度是基于父元素的明确高度来计算的，如果父元素没有设置height（哪怕它在视觉上有高度），百分比高度就会失效。所以要么给父元素补上height:100%，要么改用flex的flex-grow来实现空间填充，后者更符合flex布局的设计理念。

内容的提问来源于stack exchange，提问作者Chris Farmer