JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div class="container">
<div class="nav">
</div>
<div class="chrome">
<div class="content">
<div class="header">
</div>
<div class="whole">
<div class="left">
</div>
<div class="right">
<div class="assets">
<div class="asset">
</div>
<div class="asset">
</div>
<div class="asset">
</div>
<div class="asset">
</div>
<div class="asset">
</div>
<div class="asset">
</div>
<div class="asset">
</div>
<div class="asset">
</div>
<div class="asset">
</div>
<div class="asset">
</div>
<div class="asset">
</div>
<div class="asset">
</div>
<div class="asset">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
CSS
html, body {
height: 100%;
}
.container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-flow: column;
height: 100%;
}
.nav {
-webkit-flex: 0 1 auto;
flex: 0 1 auto;
height: 75px;
background-color: yellow;
}
.chrome {
height: 100%;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
background-color: blue;
padding: 10px;
overflow: hidden;
}
.content {
height: 100%;
}
.header {
height: 100px;
background-color: white;
}
.whole {
height: 100%;
background-color: green;
padding-left: 10px;
padding-right: 10px;
}
.left {
margin-right: 20px;
width: 150px;
height: 100%;
float: left;
background-color: red;
}
.right{
overflow: hidden;
height: 100%;
background-color: orange;
}
.assets {
overflow-y: scroll;
height: 100%;
}
.asset {
height: 100px;
background-color: aqua;
margin-bottom: 10px;
}