CSS variable does not change when the result is derived from other css variables

My guess is this a browser issue!

But its interesting

Below I have 2 variation of calculating height and assigning it.

The Black box is using css variable and to calculate and assign the height of the box.

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

The Blue box is assigned height without using css variable and it works, while the black doesn't work

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

Guess both will work in same way? NO

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

Only the second one works fine! Checkout the below code

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>