JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="some_info">
        <table id="ver-minimalist" summary="Most Favorite Movies">
<thead>
<tr>
<th scope="col">somelongwordorimage</th>
<th scope="col">Adventure</th>
<th scope="col">Action</th>
<th scope="col">Children</th>
</tr>
</thead>
<tbody>
<tr>
<td>Scary Movie</td>
<td>…orjusttoomanycolumns</td>
<td></td>
<td>Wall-E</td>
</tr>
<tr>
<td>…a scrolling div is SUPOSSED to hold</td>
<td>Star Wars</td>
<td>Bad Boys</td>
<td>Madagascar</td>
</tr>
<tr>
<td>Spartan</td>
<td>LOTR</td>
<td>Die Hard</td>
<td>Finding Nemo</td>
</tr>
<tr>
<td>Dr. Dolittle</td>
<td>The Mummy</td>
<td>300</td>
<td>A Bug’s Life</td>
</tr>
</tbody>
</table></div>
</div>

CSS

#container {
    padding: 3em;
    overflow-x: hidden;
    overflow-y: auto;
    /*overflow: scroll;//uncomment to test properly sized inner div*/
    width: 300px;
    height: 300px;
    background: red;
    padding-bottom:0;
}

#some_info {
    /*display:table; //uncomment to fix inner div not expanding with content*/
    height: 900px;
    background: #000;
    margin-bottom:3em;
    color: white;
}