Почему функция max () ведет себя по-разному для двух свойств в этом примере?

Question

В приведенном ниже коде height и width из div.greenBox оба установлены с max(40%,150px).

Просмотрено в последнем стабильном выпуске Chrome 79 для Windows 10 width вычисляется как 150px, а height вычисляется как 0. Почему это так?

Примечание. Мне известны другие обходные пути, которые могут привести к схожему результату, например height:40%; min-height:150px;, но хотелось бы понять, почему функция max() действует по-разному в этих двух случаях.

В соответствии с MDN Web Docs , функция max()

принимает одно или несколько разделенных запятыми выражений в качестве своего параметр, с наибольшим (наиболее положительным) значением выражения, используемым в качестве значения свойства, которому оно назначено.

Даже если термин 40% равен 0, не должен 150px быть выбран, потому что это более позитивно? Или, если нет, не должно ли поведение для width быть таким же?

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>

Answer 1

Ваша основная проблема - использование процента с height, который в вашем случае упадет до auto, поскольку для родительского элемента не определена явная высота:

Указывает процентную высоту. Процент рассчитывается относительно высоты содержащего блока сгенерированного блока. Если высота содержащего блока не указана явно (т. Е. Зависит от высоты содержимого), и этот элемент не является абсолютно позиционированным, значение вычисляется как 'auto' . ^ref.

В основном у вас будет что-то вроде max(auto,150px), которое не соответствует auto не потому, что auto больше 150px, а потому, что сравнение недопустимо.

В вашем случае auto будет логически вычислять до 0, поскольку ваш элемент пуст.

Вот еще несколько примеров, чтобы лучше понять:

.box>div {
  border: 1px solid;
  height: max(40%, 50px);
  width: max(40%, 50px);
  background: red;
}

.box {
  margin: 40px;
  border: 1px solid green;
  position:relative;
}

<div class="box">
  <div>my height will <br>be the content height </div>
</div>

<div class="box">
  the height will be 0
  <div></div>
</div>

<div class="box" style="height:40px;">
  <div>my height will be 50px</div>
</div>

<div class="box" style="height:0px;">
  <div>my height will still be 50px</div>
</div>

<div class="box" style="height:200px;">
  <div>my height will be 80px</div>
</div>

<div class="box">
  <div style="position:absolute;"> My height will be 50px</div>
</div>

---

разве поведение ширины не должно быть одинаковым?

У нас почти никогда не возникает проблем с процентное значение внутри ширины, но оба ведут себя одинаково, и в случае, если мы не можем определить процентное значение, оно также не сможет автоматически.