Firefox 中的 FxFlexFill 无法正常工作答案

【问题标题】：FxFlexFill in firefox not working properlyFirefox 中的 FxFlexFill 无法正常工作
【发布时间】：2019-02-24 22:16:51
【问题描述】：

我在使用 FxFlex 和 Firefox 时遇到了无法解决的问题。

我想要做的是一个 div，它用 40px 高度填充屏幕和标题，其余高度填充内容。

它在 chrome 中工作，我的屏幕有 982 像素，标题有 40 像素，内容有 942 像素。

在 Firefox 中，屏幕有 982 像素，标题 40 像素和内容 982 像素，因此，它不会显示所有内容。

这是我的html：

<div fxFlexFill fxLayout="column">

   <header fxFlex="40px">
   </header>

   <content fxFlex fxLayout="row">
   </content>

</div>

有人知道怎么解决吗？

【问题讨论】：

【解决方案1】：

我解决了，解决方法是在第二个 fxFlex 中包含高度：

<div fxFlexFill fxLayout="column">

  <header fxFlex="40px">
  </header>

  <content fxFlex="calc(100%-40px)" fxLayout="row">
  </content>

</div>

希望对你有帮助！

【讨论】：

【解决方案2】：

根据 Angular Wiki，fxFlexFill 的定义为：

fxFlexFill：最大化布局容器中元素的宽度和高度

没有提到的是如果父容器或布局容器中的元素没有任何高度，它会得到高度：0px。所以你总是需要有一些父/子节点的高度不是百分比。

【讨论】：