JSFiddle - React, Tailwind, and code Playground

by Alex Rutherford

HTML

<div class="container">
    <header>Navigations Testing Testing Testing Testing</header>
    <section>
        <div>
            <ul>
                <li>First Item</li>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>Last Item</li>
            </ul>
        </div>
    </section>
</div>

CSS

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
body, html {
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.container {
    height: 100%;
    width: 30%;
    display: table;
}
header {
    padding: 24px;
    background: blue;
    display: table-row;
}
section {
    height: 100%;
    padding: 24px;
    background: tomato;
    display: table-row;
}
section div {
    overflow-y: scroll;
    height: 100%;
}
ul {
    margin: 0;
    paddding: 0;
}