JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ckeditor.com/apps/ckeditor/4.2/ckeditor.js"></script>
<div id="wrapper">
    
    <div id="header"><h1>Wrapper div with overflow: scroll</h1></div>
    
    <div id="theeditor" contenteditable="true">
        This is the ckeditor. Click in the editor and scroll down, the toolbar won't move.. :(
    </div>
    
    <div class="other"><h2>Other content</h2></div>
    <div class="other"><h2>Other content</h2></div>
    <div class="other"><h2>Other content</h2></div>
    <div class="other"><h2>Other content</h2></div>

</div>

CSS

* {
    margin:0;
    padding:20px;
    width:calc(100%-40px);
}

    #wrapper {
        background-color: #3D6AA2;
        height: 300px;
        overflow: scroll; /*This property causes the issue*/ 
    }

#theeditor {
    height: 300px;
    background-color: white;
}

#header {
    height: 100px;
}
.other {
    height: 50px;
}