JSFiddle - React, Tailwind, and code Playground
HTML
<div id="app_pane">
<div id="sidebar">
<div id="logo">
</div>
<div id="list">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
</ul>
</div>
</div>
</div>
CSS
#app_pane,
#sidebar,
#logo {
padding: 5px;
}
#app_pane {
position: absolute;
width: 100%;
height: 100%;
-webkit-box-sizing: border-box;
-mox-box-sizing: border-box;
box-sizing: border-box;
background: #000;
}
#sidebar {
display: -webkit-box;
display: -moz-box;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
width: 200px;
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: #666;
}
#logo {
height: 50px;
margin-bottom: 5px;
background: #999;
}
#list {
overflow-y: scroll;
-webkit-box-flex: 1;
-moz-box-flex: 1;
background: #999;
}