Переменная CSS не изменяется, когда результат получен из других переменных CSS

Я предполагаю, что это проблема браузера!

Но это интересно

Ниже у меня есть 2 варианта расчета высоты и ее присвоения.

Черный ящик использует переменную css для расчета и назначения высоты ящика.

:root {
--content-height: calc(var(--app-height) - var(--app-footer) - var(--app-footer));  
}
.black {
  height: var(--content-height);
}

Синему прямоугольнику присваивается высота без использования переменной css, и он работает, а черный не работает.

.blue {
    height: calc(var(--app-height) - var(--app-footer) - var(--app-footer))
}

Думаете, оба варианта будут работать одинаково? НЕТ

https://codepen.io/Anenth/pen/VVwpzp

Только второй работает нормально! Проверьте приведенный ниже код

document.querySelector('body').style.setProperty('--app-height', "100px")

:root {
  --app-header: 20px;
  --app-footer: 20px;
  --app-height: 300px;
  --content-height: calc(var(--app-height) - var(--app-footer) - var(--app-footer));
}

.box {
  width: 50px;
  background: #000;
  margin: 20px;
  display:inline-block;
  vertical-align:top;
}

.box-with-calc-var {
  height: var(--content-height);
}

.box-without-calc-var {
  background: #00F;
  height: calc(var(--app-height) - var(--app-footer) - var(--app-footer));
}

<div class="box box-with-calc-var"></div>
<div class="box box-without-calc-var"></div>