JSFiddle - React, Tailwind, and code Playground

by dmelnik

HTML

<div class="container">
    <div class="header-row">
        <div class="header">1</div>
    </div>
    <div class="body-row">
        <div class="body">
            <div class="wrapper">
                <div class="data">
                    2
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>   <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                </div>
            </div>
        </div>
   </div>
</div>

CSS

.container {
    background: yellow;
    position: absolute;
    width: 50%;
    height: 200px;
    max-height: 80%;
    min-height: 200px;
    display: table;
}
.header-row {
    display: table-row;
    height: 50px;
}
.header {
    background: red;
    display: table-cell;
}
.body-row {
    display: table-row;
    height: 300px;
}
.body {
    background: green;
    display: table-cell;
}
.wrapper {
    overflow-y: hidden;
}
.data {
    background: pink;
    //height: 300px;
}