JSFiddle - React, Tailwind, and code Playground

by tsayen

HTML

<div class="grandparent">
<div class="parent">
    <div class="child1">
       <table class="child1-1">
           <thead>
               <th><td>header</td></th>
           </thead
           <tbody>
               <tr><td>1</td></tr>
               <tr><td>1</td></tr>
               <tr><td>1</td></tr>
               <tr><td>1</td></tr>
               <tr><td>1</td></tr>
               <tr><td>1</td></tr>
               <tr><td>1</td></tr>
               <tr><td>1</td></tr>
               <tr><td>1</td></tr>
               <tr><td>1</td></tr>
               <tr><td>1</td></tr>
           </tbody>
       </table>
    </div>
    <div class="child2">
    </div>
</div>
</div>

CSS

* {
    margin: 5px 5px 5px 5px;
    box-sizing: border-box;
}
.grandparent {
    height: 15em;
    border: 1px solid red;
}
.parent {
    height: 100%;
    border: 1px solid red;
}
.child1 {
    height: calc(100% - 5em);
    border: 1px solid black;
}
.child1-1 {
    height: 100%;
    border: 1px solid green;
    background-color: red;
    width: 100%;
}

.child1-1 tbody {
    display: block;
    overflow-y: scroll;
    height: 5em;
}

.child1-1 > tbody > tr, .child1-1 thead {
    height: 50px;
    display: table;
    table-layout: fixed;
    width: 100%;
}

.child2 {
    height: 5em;
    border: 1px solid blue;
}