Solution 1 :

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;

Solution 2 :

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%";
  height: 75px; /* parent height is specified exactly */

  /* height value is not specified */

  overflow: hidden;
<div id="fixed-height">
  <p id="fixed-height-child" class="child">


<div id="unfixed-height">
  <p id="unfixed-height-child" class="child">

Solution 3 :

In Firefox this works flawlessly:

const maxHeight = "calc(20px - 10px)"; = maxHeight;
#chatbox {
  background-color: yellow;
  overflow: hidden;
<div id="chatbox" style="overflow-y: auto; max-height: calc(100px - 25px);">test</div>

Problem :

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);"
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.


Comment posted by Azametzin

I think you meant

Comment posted by Yosef Tukachinsky

does the parent element have a fixed

Comment posted by GreatCorn

I tried both style[“max-height”] and style.maxHeight. No difference. The

Comment posted by minimal reproducible example

minimal reproducible example

Comment posted by Yosef Tukachinsky

If the parent

Comment posted by GreatCorn

Doesn’t work, max-height still stays

Comment posted by pistou

@GreatCorn Did you check that

Comment posted by GreatCorn


Comment posted by pistou

My code can’t return

Comment posted by GreatCorn

Very sorry, kept switching between the two. Your code does return

Comment posted by GreatCorn

Parent does exist, however, height is not specified nor fixed: