JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper1">
    the toolbar
</div>
<div class="wrapper2">
    <div class="div2">
    aaaa bbbb cccc dddd aaaa bbbb cccc dddd aaaa bbbb cccc dddd aaaa bbbb cccc dddd aaaa bbbb cccc dddd aaaa bbbb cccc dddd aaaa bbbb cccc dddd
        <br>
            Row
            <br>
                row
    </div>
</div>
<div class="wrapper1">
    more text
</div>

CSS

.wrapper2{width: 300px; border: none 0px RED;
overflow-x: scroll; overflow-y:scroll;}
.wrapper1{height: 200px; }
.wrapper2{height: 200px;  margin: 30px; }

.div2 {width:1000px; height: 1200px; background-color: #88FF88;
overflow: auto;}

JavaScript

$(function(){
    console.log($(window).height());
    $(".wrapper2").css('height', ($(window).height()-100)+'px');
    $(".wrapper2").css('width', ($(window).width()-60)+'px');
});