The short answer is because you are using calc.
The long answer is that the fxLayout library is checking if you are using concrete values(e.g. just a number) or a calc function and based on that decides if min or max height should be applied
// 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; }
snippet form the source that you can find on here
As visible in the snippet the max-height won't be applied in the cases where the input has calc value.
So now that we have cleared the calc case let's dive in the fxFlex="72" case.
The fxFlex directive/input accepts up to 3 space separated arguments that are as so fxFlex="{grow} {shrink}" {base} if only one input is provided like in your case fxFlex="72" , this will be evaluated the same way as fxFlex="1 1 72"
So now when we go in if statement we will check first the result for css[min], in the first half we see isFixed property (which will be false, we can skip this one as it's not related to the case). In the second we have a mix of (isValue && grow), so the grow property will be truthy, as it will take a default value of 1. The more interesting thing here is the isValue property, which represent the following logic (again as seen in the source)
let isValue = (hasCalc || hasUnits);
We already discussed the hasCalc which will be false in this case (as we have the following input fxFlex="72" ), about hasUnits this is a property that checks if there is any unit beside % following the basis value (units like %,px,rem...), so in this case the hasUnits will also be false.
To sum it up we will have css[min] value equal to null.
Going on the next line we see again isFixed value equall to false and in the second half of the expression we see the following (!usingCalc && shrink) , this time there is no calc function so !usingCalc will be true, and because we have a default value of 1 for shrink, the whole expression will be evaluated as true and it will apply the basis value as css[max].
If you don't won't to use calc i would suggest to do the following
<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>
Here instead of fxFlex="72" which will have a default shrink value of 1, I'm setting the value to 0 by doing so the fxLayout will skip the min-max check that we are looking at right now and will fill the available space.
