JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box"><table>
    <tr class="small">
        <td>test1</td>
    </tr>
    <tr class="small">
        <td>test2</td>
    </tr>
    <tr>
        <td>
            <div class="scroll">
                A <br></br>
                A <br></br>
                A <br></br>
                A <br></br>
                A <br></br>
                A <br></br>
                A <br></br>
                A <br></br>
                A <br></br>
                A <br></br>
                A <br></br>
                A <br></br>
                A <br></br>
                A <br></br>
                A <br></br>
                A <br></br>
                A <br></br>
                A <br></br>
                A <br></br>
                A <br></br>
                A <br></br>
                A <br></br>
                A <br></br>
                A <br></br>
                A <br></br>
                A <br></br>
                A <br></br>
                A <br></br>
                A <br></br>
                A <br></br>
                A <br></br>
                A <br></br>
                A <br></br>
                A <br></br>
                A <br></br>
                A <br></br>
                A <br></br>
                A <br></br>
            </div>
        </td>
    </tr>
</table>
</div>

CSS

/* apply a natural box layout model to all elements */
*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

html, body{
    height:100%;
    width:100%;
    overflow:hidden;
    margin:0; 
    padding:0;
}
.box {max-height:100%;position: relative;}
.small{
    height:20px;
}

table{
    height:100%;
    width:100%;
    border-style:solid;
    border-width:2px;
}

td{
    border-style:solid;
    border-width:3px;
}

tr{
    vertical-align:top;
}

.scroll {
    border-style:solid;
    border-width:5px;
    width:100%;
    overflow-y:auto;
    height:100%;
    max-height:100%;
}