angular - FxFlex Calc 设置最小高度，而原始值设置最大高度

Question

<div fxFill fxLayout="column">
    <div fxFlex="8" fxLayout="column"> Fixed Header </div>
    <div fxFlex="20" fxLayout="row" [fxHide]="isShow"> Colapsable Header </div>
    <div fxFlex="72" fxLayout="column"> Page content </div>
</div>

像这样，如果我隐藏标题，页面的20％保持空白，导致包含页面内容的div仍然只占据72％
但是如果我使用 with calc <div fxFlex="calc(92% - 20%)"> ，这个相应的 div 会根据上面的 div 是隐藏还是显示来修改她的高度，
所以即使 div 折叠起来也永远不会有空格..
为什么它会这样工作？ calc(92% - 20%) 它总是 72%，那么为什么它的行为不同呢？
编辑问题标题后的更多上下文:
在观察生成的 Html 后，我收集到了

fxFlex="72"设置一个 max-height="72%"

fxFlex="calc(92%-20%)"套min-height="72%"

Answer 1

简短的回答是因为您正在使用 calc .
长答案是fxLayout库正在检查您使用的是具体值(例如只是一个数字)还是 calc功能并基于此决定是否 min或 max应应用高度

    // Fix for issues 277, 534, and 728
    if (basis !== '0%' && basis !== '0px' && basis !== '0.000000001px' && basis !== 'auto') {
      css[min] = isFixed || (isValue && grow) ? basis : null;
      css[max] = isFixed || (!usingCalc && shrink) ? basis : null;
    }

您可以在 here 上找到的源代码片段
如片段中所示 max-height在输入有 calc 的情况下不会应用值(value)。
所以现在我们已经清除了 calc案例让我们深入了解 fxFlex="72"案件。 fxFlex指令/输入最多接受 3 个空格分隔的参数，如 fxFlex="{grow} {shrink}" {base}如果只提供一个输入，如您的情况 fxFlex="72" ，这将以与 fxFlex="1 1 72" 相同的方式进行评估
所以现在当我们进去时 if声明我们将首先检查 css[min] 的结果，上半年我们看到 isFixed属性(这将是错误的，我们可以跳过这个，因为它与案例无关)。
在第二个中，我们混合了 (isValue && grow) ，所以 grow属性将是真实的，因为它将采用默认值 1。
这里更有趣的是 isValue属性，代表以下逻辑(再次在源代码中看到)

   let isValue = (hasCalc || hasUnits);

我们已经讨论过 hasCalc这将是 false在这种情况下(因为我们有以下输入 fxFlex="72" )，大约 hasUnits这是一个属性，用于检查 % 旁边是否有任何单位关注 basis值(单位如 %,px,rem...)，所以在这种情况下 hasUnits也将是 false .
总而言之，我们将有 css[min]值等于 null .
继续下一行，我们再次看到 isFixed值等于 false在表达式的后半部分，我们看到以下 (!usingCalc && shrink) ，这次没有calc函数所以 !usingCalc将是 true ，因为我们有一个默认值 1为 shrink ，整个表达式将被评估为 true它将应用 basis值为 css[max] .
如果你不想使用 calc我建议做以下事情

  <div fxFill fxFlex="100" fxLayout="column">
    <div style="background-color: palegreen;" fxFlex="8" fxLayout="column"> Fixed Header <button (click)="toggle()">Toggle</button> </div>
    <div style="background-color: rgb(179, 24, 174);" fxFlex="20" fxLayout="row" [fxHide]="show"> Colapsable Header </div>
    <div style="background-color: orange;" fxFlex="1 0 72" fxLayout="column"> Page content </div>
  </div>

这里不是 fxFlex="72"它将有一个默认值 shrink 1 的值，我将值设置为 0这样做 fxLayout将跳过我们现在正在查看的最小-最大检查并填充可用空间。