JSFiddle - React, Tailwind, and code Playground

HTML

<div class="leftSidebar">sidebarWithSomeExtraTextToDemonstrateTheScrollbarForTheIndividualDivThatIsntHappeningInMain</div>
<div class="main">Here is some text. A horizontal scrollbar should appear when this div's width becomes less than 400px</div>

CSS

* {
    margin:0;
    padding:0;
}

.main {
    background: green;
    position: absolute;
    min-width: 400px;
    top: 0;
    bottom: 0;
    left: 200px;
    right: 0;
    overflow: auto;
}

.leftSidebar {
    background: blue;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    width: 200px;
    overflow-x: auto;
    overflow-y: scroll;
}