制作ag-grid的方法采用角度为5/6的100％页面高度

Question

我正在尝试使角度ag-grid占据网页的整个高度，所以如果我有ag-grid的文本或标题等组件，我想让显示的网格占据页面的整个高度。

我在堆栈溢出上看了这个问题：

How can I make my flexbox layout take 100% vertical space?

然后我试图将此应用于角度ag-grid网格

这是我申请的CSS，但它没有给出所需的结果：

body, html {
  height: 100%;
  margin:2px;
}

my-app .container {
  display: flex;
  flex-direction: column;
}


my-app .container .ag-grid-angular {
  flex-basis: 100%;
  display: flex;
  flex-grow: 1;
}

以下是Stackblitz演示的链接：

https://stackblitz.com/edit/ag-grid-bss-test-kgpfxz?file=styles.css

我使用类.container用div包围网格，以便能够应用display: flex CSS，但这没有用。有没有办法让网格的高度占据页面的整个高度？

如果我删除内联样式：

style="width: 100%; height: 600px"

对于ag-grid-angular，我只能在其中看到一行。

Answer 1

在模板中删除styles.css的内联样式后，您需要在ag-grid-angular中进行一些更改。

看看这个Stackblitz demo

具体来说，你需要高举ag-grid-angular元素（不仅仅是类）和它的父容器。

my-app, my-app .container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

ag-grid-angular{
  height: 100%;
}