Why does the max() function behave differently for two properties in this example?

In the code below, the height and width of div.greenBox are both set with max(40%,150px).

Viewed in the latest stable-release Chrome 79 for Windows 10, the width is computed as 150px while the height is computed as 0. Why is that?

Note: I am aware of other workarounds which could cause the outcome to be similar, such as height:40%; min-height:150px;, but would like to understand why the max() function acts differently in these two cases.

According to the MDN Web Docs, the max() function

takes one or more comma-separated expressions as its parameter, with the largest (most positive) expression value used as the value of the property to which it is assigned.

Even if the 40% term computes to 0, shouldn't 150px be selected because it is more positive? Or if not, shouldn't the behavior for width be the same?

JSfiddle: https://jsfiddle.net/wbtfiddle/p7Lzqn8m/3/

HTML core:

div#mainContainer {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  align-items: center;
  /* vertical */
  justify-content: center;
  /* horizontal */
  text-align: center;
}

div.greenBox {
  height: max(40%, 150px);
  width: max(40%, 150px);
  background-color: green;
}

<div id="mainContainer"><div>
    Here is some sample text.<br>Its author would expect a green box to follow.<br><div class="greenBox"></div></div></div>