Tengo los siguientes elementos div en mi componente:

 <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">

En cada renderizado, verifico si wallView div está desbordando bottomDiv, si es así, quiero reducir el ancho de wallViewContainer hacia abajo

 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%" } }

Sin embargo, cuando cambio mi wallViewContainer.style.width al nuevo ancho, no se aplica y aún muestra el 100% en las herramientas de desarrollo en Chrome.

Pero extrañamente, si lo cambio así wallViewContainer.style.width = "42%" se aplica.

He comprobado para asegurarme de que Math.round((parseInt(currWidth) - percentOverflow)).toString() + "%" calcula una cadena con un número entero seguido de un porcentaje... ¿alguna idea?