JSFiddle - React, Tailwind, and code Playground

HTML

<div id='left'>
    Contents
</div>
<div id='wrapper'>
    <div id='top'>
        very<br />many<br />lines<br />
        very<br />many<br />lines<br />
        very<br />many<br />lines<br />
        very<br />many<br />lines<br />
        very<br />many<br />lines<br />
        very<br />many<br />lines<br />
    </div>
    <div id='bottomwrapper'>
        <div id='bottom'>
            This is quite a long content which will cause the scrollbars (x-direction) to appear, the user can then scroll horicontally through the content of this container.
        </div>
    </div>
</div>

CSS

html,body {
    margin:0px;
    height:100%;
}
#left, #top, #bottom {
    padding:10px;
}
#left, #bottom {
    box-sizing:border-box;
}

#left {
    float:left;
    background-color:red;
    width:200px;
    height:100%;
}
#wrapper {
    overflow-y:auto;
    height:100%;
}
#wrapper:before {
    height:100%;
    float:left;
    content:'';
}
#top {
    background-color:blue;
    min-height:200px;
}
#bottomwrapper {
    position:relative;
}
#bottomwrapper:after {
    content: '';
    display:block;
    clear:both;
} 
#bottom {
    position:absolute;
    height:100%;
    min-height:200px;
    width:100%;
    background-color:green;
    overflow-x:auto;
    white-space: nowrap;
}