将 ag-grid 与 flexbox 一起使用

Posted 2023-03-28

【中文标题】将 ag-grid 与 flexbox 一起使用

【英文标题】：Using ag-grid with flexbox

【发布时间】：2019-04-07 22:23:57

【问题描述】：

我一直在尝试将 ag-grid 与 flex 布局一起使用，但它似乎没有按预期工作。

以下 stackblitz 有一个可重现的示例： https://stackblitz.com/edit/angular-zwpdhl

我的 ag-grid 位于具有列 flex 布局的父级下方，而父级本身位于 mat-sidenav-content 下方。我的期望是 ag-grid 取 flex 列中剩余的高度，如果网格数据太大，那么网格会得到一个垂直滚动条。然而，发生的事情是网格折叠成一条没有高度的水平线。我尝试将网格位置设置为绝对位置，（上、左、右、下）的值为 0，但这会破坏 flex 列，因为网格现在与列中的其他元素重叠。唯一的解决方法似乎是为网格设置一个固定的高度，但这违背了 flex 布局的意义。

以前有人遇到过这个问题吗？任何想法如何让它与 flex 布局一起正常工作？

【参考方案1】：

您的问题是 mat-sidenav-content 内的额外 div - 没有它，网格只会呈现 fine：

<mat-sidenav-content fxLayout="column" fxLayoutGap="5px" fxFlex>
    <div>Toolbar</div>
    <ag-grid-angular class="ag-theme-balham" style="height: 100%; width: 100%;" [rowData]="rowData" [columnDefs]="columnDefs">
    </ag-grid-angular>
</mat-sidenav-content>

而不是

<mat-sidenav-content>
  <div fxLayout="column" fxLayoutGap="5px">
     <div>Toolbar</div>
     <ag-grid-angular class="ag-theme-balham" style="height: 100%; width: 100%;" [rowData]="rowData" [columnDefs]="columnDefs">
       </ag-grid-angular>
  </div>
</mat-sidenav-content>

解释：mat-sidenav-content 具有所需的整列高度，但它本身不是 flex 容器 - 这意味着 <div fxLayout="column" fxLayoutGap="5px"> 被布置为普通块元素，其高度由内容定义。 ag-grid-angular 元素的定义高度为 100%，并且作为 flex 列容器的子元素，causes some problems。只需删除这个额外的 div，网格元素上的 100% 高度就可以工作，因为mat-sidenav-content 已经定义了高度。

【讨论】：

感谢您的回答。我似乎也解决了这个问题，只需将 mat-sidenav-content 内额外 div 的高度设置为 100%。示例更新于stackblitz.com/edit/angular-7nabov