JSFiddle - React, Tailwind, and code Playground

JavaScript

const blueprintDiv = document.createElement("div");
blueprintDiv.style.cssText = "border: 1px solid; visibility: hidden;";
blueprintDiv.innerHTML = `<p>BEGIN</p><ins>BB<img src="http://www.google.com/intl/en_ALL/images/logo.gif"></ins><p>END1<br><br><br><br><br><br>END2</p>`;
document.body.appendChild(blueprintDiv);

const imgPromises = [Promise.resolve()];
const img = blueprintDiv.querySelector("img");
if (!img.complete) {
    imgPromises.push(new Promise(resolve => { img.onload = img.onerror = resolve; }));
}

Promise.all(imgPromises).then(() => {
    console.log("All images loaded.");
    const newDiv = document.createElement("div");
    newDiv.style.cssText = `border: 1px solid red; display: block; overflow: auto; height: ${img?.offsetHeight}px`;
    for (const child of blueprintDiv.childNodes) {
        newDiv.appendChild(child.cloneNode(true));
    }

    const insTop = blueprintDiv.querySelector("ins").offsetTop - blueprintDiv.offsetTop;
    const imgTop = img.offsetTop - blueprintDiv.offsetTop;
    const offsetTop = Math.min(insTop, imgTop);

    document.body.textContent = "";
    document.body.appendChild(newDiv);
    newDiv.scrollTop = offsetTop;

    console.log(`Direct ScrollTop: ${newDiv.scrollTop}; offsetTop: ${offsetTop}; insTop: ${insTop}; imgTop: ${imgTop}`);
    setTimeout(() => {
        console.log(`Delayed ScrollTop: ${newDiv.scrollTop}; offsetTop: ${offsetTop}; insTop: ${insTop}; imgTop: ${imgTop}`);
        // newDiv.scrollTop = offsetTop; // Uncomment => correct scrolling
    }, 100);
});