If 25px is a fixed value, why not change your formula like so?

const mhstr = `calc(100% - ${25 + pin.getBoundingClientRect().height}px);`;
document.getElementById('chatbox').style.maxHeight = mhstr;

If you want to use a percentage data type for max-height property, like these examples:

max-height: 100%;
max-height: calc(100% - 25%);
max-height: calc(100% - 25px);
...

Then you should have a parent element with fixed height.

So it doesn’t matter you set the ‘max-height’ in CSS or JS in this type of case!

As you can see in the example below, the first group has a fixed-height parent, in contrast, the second group has an unfixed-height parent.

So the first one is semi-hidden after setting the max-height, but the second doesn’t change at all!

document.getElementById("fixed-height-child").style.maxHeight = "10%";
document.getElementById("unfixed-height-child").style.maxHeight = "10%";

#fixed-height{
  height: 75px; /* parent height is specified exactly */
}

#unfixed-height{
  /* height value is not specified */
}

.child{
  overflow: hidden;
}

<div id="fixed-height">
  <p id="fixed-height-child" class="child">
    PARENT WITH FIXED HEIGHT
  </p>
</div>

<br/>
<br/>
<br/>

<div id="unfixed-height">
  <p id="unfixed-height-child" class="child">
    PARENT WITH UNFIXED HEIGHT
  </p>
</div>

In Firefox this works flawlessly:

const maxHeight = "calc(20px - 10px)";

chatbox.style.maxHeight = maxHeight;

#chatbox {
  background-color: yellow;
  overflow: hidden;
}

<div id="chatbox" style="overflow-y: auto; max-height: calc(100px - 25px);">test</div>

UPDATE: Even document.getElementById("chatbox").style.maxHeight = "calc(100% - 54px);"; with JS didn’t work, so the problem is with assigning to the CSS property. Changing the value manually in the Elements tab of the Chrome developer tools works as it should.

There is an event where I create a p and insert it before a div. I need to then recalculate the maximum height of that div to make sure no unneeded scrollbars appear. To recalculate the maximum height I make a string in JS:

var mhstr = "calc(100% - 25px - "+pin.getBoundingClientRect().height.toString()+"px);"

, pin being the newly created p element.

The string returns as supposed to: calc(100% - 25px - 29px);, however, the document.getElementById("chatbox").style["max-height"] doesn’t accept it and stays unmodified.

The default original value of max-height is calc(100% - 25px);, 25px being the fixed height of an other div that has fixed position.

I tried to add 25 to the pin.getBoundingClientRect().height, but it still didn’t work.

Changing the max-height value to the mhstr string in the Chrome developer tools does the job, but I want it to be changed via script.

Here is the div object:

<div id="chatbox" style="overflow-y: auto; max-height: calc(100% - 25px);">

Here is the code I use to try and change the max-height value:

var mhstr = "calc(100% - 25px - "+pin.getBoundingClientRect().height.toString()+"px);"
console.log(mhstr);
document.getElementById("chatbox").style["max-height"] = mhstr;

Note: mhstr returns calc(100% - 25px - 29px);, changing [“max-height”] or maxHeight to a fixed value like 0, “2px” or “100%” works fine, but doesn’t change to the mhstr.