JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main-view">

<div class="toolbar">
    <a href="some-button"></a>
</div>

<div class="dates-bar">
    <ul><li>1</li><li>2</li></ul>
</div>



<div class="scroll-view">
    <table class="table-view">
        <tr><td>Name 1</td></tr>
        <tr><td>Name 1</td></tr>
        <tr><td>Name 1</td></tr>
        <tr><td>Name 1</td></tr>
        <tr><td>Name 1</td></tr>
        <tr><td>Name 1</td></tr>
        <tr><td>Name 1</td></tr>
        <tr><td>Name 1</td></tr>
        <tr><td>Name 1</td></tr>
        <tr><td>Name 1</td></tr>
        <tr><td>Name 1</td></tr>
        <tr><td>Name 1</td></tr>
    </table>
</div>
    
</div>

CSS

* {
    padding: 0px;
    margin: 0px;
}

.toolbar {
    height: 100px;
}

.dates-bar {
    height: 80px;
}

.main-view {
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

.table-view {
    border-collapse: collapse;
    width: 100%;
}

.table-view tr {
    border-bottom: 1px solid #eaeaea;
    width: 100%;
}

.table-view td {
    padding: 10px;
}

.scroll-view {
    overflow: auto;
    /*height: 100px; This one works*/
    height: 100%; /* this one goes below the viewport, so that way the overflow doesn't work */
    border: 1px solid black;
}