Is it possible to determine the height of a div element with its content without using overflow-y: auto?
I would like to keep overflow-y: auto applied but still be able to calculate the height of the div as if the overflow property was not there.
Specific Scenario:
Consider a chat window with text and image messages. The chat div has overflow-y: auto and at the bottom, there is another div with ref={scrollToBottomRef}
There is an useEffect hook:
useEffect(() => {
scrollToBottomRef.current.scrollIntoView({
behavior: 'smooth'
});
});
It functions correctly, scrolling to the bottom when new messages are loaded. However, if an image is included in a message, the scroll jumps up from the bottom after rendering the image. How can this issue be resolved?