I have the following div elements in my component:

       <div className={`max-h-5/6 flex flex-row mx-auto`} style={{ width: '100%'}} id="wallViewContainer">
             <div className="h-full w-full my-auto justify-center flex flex-1" data-testid="wallView">
       </div>
       <div className="h-10 pb-8 w-full flex flex-row justify-between items-center" id="bottomDiv">

On each render I am checking if the wallView div is overflowing the bottomDiv, if it is, I want to scale the width of the wallViewContainer down

  const wallViewDiv = document.querySelector('[data-testid="wallView"]')
  const bottomDiv = document.getElementById('bottomDiv')
  const wallViewContainer = document.getElementById('wallViewContainer')
  var wallRect = wallViewDiv?.getBoundingClientRect();
  var btmRect = bottomDiv?.getBoundingClientRect();

  if (wallRect && btmRect && wallViewContainer) {
    let currWidth = wallViewContainer?.style?.width?.split('').slice(0, 3).join('')
    const overflow = wallRect.bottom > btmRect.top

    if (overflow) {
      let percentOverflow = ((wallRect.height - btmRect.top) / wallRect.bottom * 100)
      wallViewContainer.style.width = Math.round((parseInt(currWidth) - percentOverflow)).toString() + "%"
    }
    else {
      wallViewContainer.style.width = "100%"
    }
  }

However, when I change my wallViewContainer.style.width to the new width, it is not applying and still shows 100% in dev tools in chrome.

But weirdly enough if i change it like this wallViewContainer.style.width = "42%" it does apply.

I have checked to make sure Math.round((parseInt(currWidth) - percentOverflow)).toString() + "%" computes a string with a whole number followed by a percent...any ideas?