JSFiddle - React, Tailwind, and code Playground
CSS
html {
height: 100%;
}
body {
margin:0;
padding:0;
height:100%;
}
.my-flex-container{
display: flex;
width : 100%;
height: 100%;
border: 1px solid #000;
flex-direction: column;
box-sizing: border-box;
overflow: hidden;
}
.b1 {
background-color: #ccc;
flex-shrink: 0;
}
.b2 {
background-color: #bbb;
flex-shrink: 0;
}
.b3 {
background-color: #aaa;
flex-grow: 1;
overflow-y: auto;
}