JSFiddle - React, Tailwind, and code Playground

by sbaydakov

HTML

<div class="container">
    <div>A</div>
    <div>B</div>
    <div>C</div>
</div>

CSS

html, body     {
    min-height: 100%;
    height: 100%;
    margin: 0; padding: 0;
}
.container     {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    height: 100%;
}

.container > div     {
    // flex: 1 0 50px;
}

.container > div:nth-child(1)     {
    background: red;
    flex: 0 0 40px;
}

.container > div:nth-child(2)     {
    background: yellow;
    flex: 0 0 60px;
}

.container > div:nth-child(3)     {
    background: blue;
    flex: 1 0 auto;
    min-height: 80px;
}