I'm attempting to set a fixed height for a div in order to enable overflow scrolling. However, I am encountering issues as I am using JavaScript within a useEffect hook to accomplish this task. The problem is inconsistent as sometimes the height is set correctly, but most of the time it is incorrect.
To address this issue, I have created a function within the component and called it inside a useEffect hook:
const TweetsPanel: React.FC<TweetsPanelType> = ({ tweetsData }) => {
function setHeightTweetsDiv() {
const height = document.getElementById('last-boicotes')?.clientHeight;
//the "last-boicotes" div is located in another component on the same page.
document.getElementById('tweets-content').style.height = `${height}px`;
}
useEffect(() => {
setHeightTweetsDiv();
}, []);
return (
<>
<div>
<h2>Tweets</h2>
</div>
<div id="tweets-content">
//tweets
</div>
</>
);
Despite appearing to work, the height being set is incorrect. Sometimes it works after reloading the page a few times:
I am trying to maintain equal height between two columns where the left column will always be fully displayed, while the right column may contain more content, necessitating a fixed height and scrollable overflow.
I am unable to use flex-box as each column contains a separate div for heading and content, with the scrolling div situated within the main column div.
If anyone knows of an alternative solution to achieve this outcome, please advise me.
Apologies for my English and thank you in advance.