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

【问题标题】：Dealing with height of Angular component inside a flex container处理 flex 容器内 Angular 组件的高度
【发布时间】：2019-10-24 07:10:21
【问题描述】：

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

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

我遇到的问题是面板内的树视图组件不会占用所有高度，因为父级是 flex div。我对 flex CSS 规则很陌生，我想知道在这种情况下是否有办法将高度强制为 100%。

谢谢！

【问题讨论】：

【解决方案1】：

您应该在物品容器上设置display: flex; 和flex-direction: column;。否则 app-tree 上的 flex: 1 没有任何效果，因为它不在 flex 容器中。当它们成为具有列布局的 flex 容器时，app-tree 元素将占用剩余空间。

这是一个基于上述 stackblitz 演示的工作演示。

【讨论】：

【解决方案2】：

在这种情况下，不确定为什么需要 Flexbox？作为带有Flex显示的div，只有一个孩子？如果您在 flex display div 上设置 100% 的高度，移除 flex display，然后在 app-tree 内的 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>

【讨论】：

嗨！如果我从项目容器中删除 'flex: 1'，则选项卡不再均匀分布。无论如何，我已经阅读了更多关于 Flexbox 系统的内容，我认为这不可能实现我想要的。因此，我将使用ViewChild 计算 div 的适当高度，并在容器大小更改时更新它们。当我得到它时，我会发布工作解决方案。干杯！
一切都好@fel！我只能推荐在 Flexbox 上学习 CSS 课程。长期以来，我一直在摸索和试错，在学习了一个课程后，我对它的理解要好得多。

【解决方案3】：

最后，我无法使用 Flexbox 使其 100% 正常工作，因此我决定创建一个简单的自定义手风琴组件，根据面板折叠/展开状态计算面板的高度。然后，通过处理窗口的调整大小事件，只要有变化，我就会重新计算这些高度。

感谢所有建议！

【讨论】：