JSFiddle - React, Tailwind, and code Playground
by sj_shyam_joshi
HTML
<html>
<body style="padding: 0; margin: 0">
<div style="display: flex; flex-direction: column; height: 100%">
<div style="background-color: gray; height: 40px">Content 1</div>
<div
style="
display: flex;
background-color: green;
height: calc(100vh - 40px);
"
>
<div style="background-color: blue">Content 2.1</div>
<div style="background-color: yellow; height: 100%; overflow-y: auto">
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
Content 2.2<br />
...