JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container flexbox">
    <div class="main flex overflow-auto flexbox">
        <div class="flex">
            <p>Content Content Content Content Content</p>
            <p>Content Content Content Content Content</p>
            <p>Content Content Content Content Content</p>
            <p>Content Content Content Content Content</p>
            <p>Content Content Content Content Content</p>
            <p>Content Content Content Content Content</p>
            <p>Content Content Content Content Content</p>
            <p>Content Content Content Content Content</p>
            <p>Content Content Content Content Content</p>
            <p>Content Content Content Content Content</p>
            <p>Content Content Content Content Content</p>
            <p>Content Content Content Content Content</p>
            <p>Content Content Content Content Content</p>
            <p>Content Content Content Content Content</p>
        </div>
    </div>
    <div id="sidebar"></div>
</div>

CSS

div.flexbox {
    display: -webkit-flex;
    display: flex;
}
div.flex {
    -webkit-flex: 1;
}

div.overflow-auto {
  overflow: auto;
}

.container {
    width: 500px;
    height: 200px;
}

JavaScript

setTimeout(function() {
    document.querySelector('.overflow-auto').scrollTop = 50;
    document.querySelector('#sidebar').innerHTML = 'foo';
    alert("scrolltop should be 50, was: " + document.querySelector('.overflow-auto').scrollTop)
}, 100);