JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper1">
    <div class="div1">
    </div>
</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
    </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; }
.div1 {width:1000px; height: 20px; }
.div2 {width:1000px; height: 200px; background-color: #88FF88;
overflow: auto;}

JavaScript

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