JSFiddle - React, Tailwind, and code Playground

by Sergey Linnick

HTML

<div class="wrapper">
	<div class="sidebar">
		<h2>Sidebar</h2>		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>
		<h2>Sidebar</h2>

	</div>
	<div class="content">
  <div class="top">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi eligendi similique perferendis libero nulla fuga corporixcepturi eligendi similique perferendis libero nulla fuga corporixcepturi eligendi similique perferendis libero nulla fuga corporixcepturi eligendi similique perferendis libero nulla fuga corporixcepturi eligendi similique perferendis libero nulla fuga corporis praesentium dolores ratione. Odio voluptatum dolores omnis eveniet ratione consequatur, facilis in dignissimos </div>
    <div class="bottom">
      
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse quam at ratione quas tempora ea totam perspiciatis molestiae tempore pariatur unde alias eaque est...

CSS

body, html {
  overflow:hidden;
  height:100vh;
  margin:0;
  padding:0;
}
.wrapper{
	display: flex;
}
.sidebar,.content{
	flex-direction: column;
	height:100vh;
	border:1px solid;
	overflow: auto;
}
.sidebar{
  flex:0 0 300px;
}
.content{
  display:flex;
  flex-flow:column nowrap;
  justify-content:stretch;
}
.top {  
  flex: 0 0 auto;
}
.bottom{
  flex: 0 1 auto;
  overflow:auto;
}