JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="mainWrapper">
        <div class="mainHeader">header</div>
        <div class="mainNav">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquam arcu diam. Vivamus id urna lobortis, iaculis arcu eu, ultrices elit. Donec sagittis, sapien ut aliquet dignissim, dolor nisl interdum justo, non pharetra risus arcu in justo. Vivamus tempor condimentum sagittis. In consequat, purus at viverra viverra, mauris diam vestibulum enim, vel volutpat mauris tortor sed elit. Suspendisse porta vel nisi at consectetur. Pellentesque ullamcorper elementum lacinia. Nunc consectetur sed nibh eget cursus. Curabitur quis ipsum ipsum. Fusce tincidunt enim in malesuada rhoncus. Fusce lacinia sem tempor, rhoncus tortor eu, tempor purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tempor suscipit felis, non dapibus libero pharetra sed. Sed dictum purus quam.

Mauris posuere feugiat nulla, ac consequat libero iaculis eu. Duis porta ultrices lorem in viverra. Mauris in dolor libero. Fusce aliquet, felis sed pharetra elementum, massa dui viverra sapien, ac luctus massa turpis non diam. Curabitur vitae metus ligula. Praesent ornare augue a metus consequat, id volutpat dui elementum. Sed nec nulla est. Suspendisse id cursus velit, egestas venenatis tellus. Aliquam erat volutpat. In rhoncus turpis quis odio condimentum volutpat. Maecenas nec pellentesque dolor. In hac habitasse platea dictumst. Pellentesque rhoncus metus elementum lacus molestie, in interdum nulla rutrum. Morbi tempor sollicitudin nisl ac tempor. Vestibulum at dignissim libero, eget luctus metus.

Proin et diam ante. Cras nec lobortis urna. Sed dignissim dolor non sapien tincidunt tristique. Nam interdum interdum sapien, ac placerat enim convallis ac. Aenean a nisi vitae elit vestibulum sollicitudin eget ac mauris. Donec vitae elementum nisl. Aliquam sed ante at tellus ultricies cursus. Nulla eu est et enim pharetra aliquet ac sed eros. Suspendisse nisi dui, ullamcorper...

CSS

html html {
    height: 100%;
    }
    body {
    background-color: #69a8ca;
    background-repeat: no-repeat;
    background-position: 0 100%;
    margin-top: 2px;
    margin-bottom: 2px;
    height:100vh;
    }
    .mainWrapper {
    height:100%;
    }
    .mainNav, .mainContent {
    height: calc(100vh - 160px);
    margin-top: 5px; overflow:auto;
    }
    .mainHeader {
    display:block;
    text-align:center;
    height: 150px;
    background:red;
    }
    .mainNav {
    float:left;
    width: 100px;
    background: blue;
    }
    .mainContent {
    background: green;
    }