处理flex容器内Angular组件的高度

Question

我想创建一个具有以下要求的简单tabview组件：

• 它应该占其父容器高度的100％
• 每个面板/选项卡都有一个带有按钮的标题，用于折叠/展开它和一个内容，该内容包含一个树状视图组件，并应占用面板的所有剩余空间
• 如果我折叠面板，则展开的面板应按比例增长

我已经在Stackblitz上准备了一个示例：

https://stackblitz.com/edit/angular-4pgdbj?embed=1&file=src/app/app.component.html

我遇到的问题是面板内部的treeview组件无法占据所有高度，因为父级是flex div。我对Flex CSS规则非常陌生，在这种情况下，我想知道是否有一种方法可以将高度设置为100％。

谢谢！

Answer 1

您应该在项目容器上设置display: flex;和flex-direction: column;。否则，应用树上的flex: 1无效，因为它不在flex容器中。当它们成为具有列布局的弹性容器时，应用程序树元素将占用剩余空间。

这是一个基于上面的stackblitz演示的workig演示。

https://stackblitz.com/edit/angular-tqnxub

Answer 2

在这种情况下，不确定为什么需要Flexbox？作为带有Flex显示的div，只有一个孩子？ 如果您在flex display div上将高度设置为100％，请移除flex display，然后在应用程序树内的div上将高度设置为100％，这将解决您的问题。

因此，相关代码：

<div style="height: 100%" [ngStyle]="{ 'display': tabsExpanded[0] ? 'block' : 'none' }">
    <app-tree></app-tree>
</div>

和

<div style="background: #fca; height: 100%">
  <ul>
    <li>Sample li</li>
    <li>Second sample</li>
    <li>Third!</li>
  </ul>
</div>

Answer 3

最后，我无法让它100％地满足我使用Flexbox的需要，所以我决定创建一个简单的自定义手风琴组件，该组件根据面板的折叠/展开状态计算其高度。然后，通过处理窗口的resize事件，只要有变化，我就会重新计算这些高度。

感谢所有建议！