JSFiddle - React, Tailwind, and code Playground

by Nick Karnik

HTML

<div class="container">
    <div class="top color">child1</div>
    <div class="middle color">child2</div>
    <div class="bottom color">child3</div>
</div>

CSS

.container {
    height: 1500px;
    width:100px;
    background-color: red;
}
.color {
    background-color: yellow;
    border: 1px solid blue;
}
.top {
    top: 0;
    min-height: 100px;
}
.middle {
    top: 100px;
    height: calc(100% - 200px);
}
.bottom {
    bottom: 0;
    min-height: 100px;
}