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

简短的回答是，因为您正在使用 .calc

长答案是，库正在检查您使用的是具体值（例如，只是一个数字）还是函数，并据此决定是否应应用或应用高度fxLayoutcalcminmax

    // 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;
    }

您可以在此处找到的来源的片段

如代码片段所示，在输入具有值的情况下不会应用。max-heightcalc

所以现在我们已经清除了这个案例，让我们深入研究这个案例。calcfxFlex="72"

指令/输入最多接受 3 个空格分隔的参数，如果只提供一个输入，就像你的情况一样，这将以与fxFlexfxFlex="{grow} {shrink}" {base}fxFlex="72"fxFlex="1 1 72"

所以现在当我们进入语句时，我们将首先检查结果，在前半部分我们看到属性（这将是假的，我们可以跳过这个，因为它与案例无关）。 在第二种情况下，我们混合了 ，因此该属性将是真实的，因为它的默认值为 1。 这里更有趣的是属性，它表示以下逻辑（再次如源代码所示）ifcss[min]isFixed(isValue && grow)growisValue

   let isValue = (hasCalc || hasUnits);

我们已经讨论过在这种情况下将是什么（因为我们有以下输入），关于这是一个属性，用于检查值后面是否有任何单位（单位如%，px，rem...），所以在这种情况下，也将是.hasCalcfalsefxFlex="72"hasUnits%basishasUnitsfalse

总而言之，我们将得到等于 的值。css[min]null

在下一行，我们再次看到值等于，在表达式的后半部分，我们看到以下内容，这次没有计算函数，所以将是 ，并且因为我们的默认值为 ，整个表达式将被计算为 ，它将应用该值为 。isFixedfalse(!usingCalc && shrink)!usingCalctrue1shrinktruebasiscss[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>

这里不是 which 的默认值为 ，而是将该值设置为，这样做将跳过我们现在正在查看的 min-max 检查并将填充可用空间。fxFlex="72"shrink10fxLayout