JSFiddle - React, Tailwind, and code Playground

HTML

<div id="table">
	<div id="row">
		<div id="cell_1">
            <div id="overflown_div">
                <p>Blah blah blah</p>
                <p>Blah blah blah</p>
                <p>Blah blah blah</p>
                <p>Blah blah blah</p>
                <p>Blah blah blah</p>
                <p>Blah blah blah</p>
                <p>Blah blah blah</p>
                <p>Blah blah blah</p>
                <p>Blah blah blah</p>
                <p>Blah blah blah</p>
            </div>
		</div>
		<div id="cell_2">
		    Blah blah blah
		</div>
	</div>
</div>

CSS

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#table {
    width: 100%;
    display: table;
    height: 100%;
}

#row {
    display: table-row;
}
	
#cell_1, #cell_2 {	
    display: table-cell;
    height: 100%;
}
	
#cell_1 {
    width: 390px;
    background: aliceblue;
}

#cell_2 {
    background: yellow;
}
		
#overflown_div {
    height: 100%;
    overflow-y: scroll;
    padding: 10px;
}

#overflown_div p {
 height: 80px;   
}