Untitled

dabblet.css

.outer {

	position: relative;
	background: red;
	height: 100%;
	
	display: flex;
	flex-direction: column;
	align-items: stretch;
	overflow: hidden;
	
}

html, body { 
	height: 100%;
	overflow: hidden;
}

.header { background: green; }

.wrap {
	
	background: beige;
	display: flex;
	align-items: stretch;
	flex: 1;
}

.content {

	display: flex;	
	align-items: stretch;

}

.inner-content {	
	display: flex;
	align-items: stretch;
}

.col-right {
	
	background: blue;
	overflow: auto;

}

dabblet.html

<div class="outer">
	<div class="header">HEADER</div>	
	<div class="wrap">
		<div class="content">
			<div class="inner-content">
				<div class="col-left">SIDEBAR</div>
				<div class="col-right">
					<p>A paragraph</p>
					<p>A paragraph </p>
					<p>A paragraph</p>
					<p>A paragraph</p>
					<p>A paragraph</p>
					<p>A paragraph</p>
					<p>A paragraph</p>
					<p>A paragraph</p>
					<p>A paragraph</p>
					<p>A paragraph</p>
					<p>A paragraph</p>
					<p>A paragraph</p>
					<p>A paragraph</p>
					<p>A paragraph</p>
					<p>A paragraph</p>
					<p>A paragraph</p>
					<p>A paragraph</p>
					<p>A paragraph</p>
					<p>A paragraph</p>
					<p>A paragraph</p>
					<p>A paragraph</p>
					<p>A paragraph</p>
					<p>A paragraph</p>
					<p>A paragraph</p>
					<p>A paragraph</p>
					<p>A paragraph</p>
					<p>A paragraph</p>
					<p>A paragraph</p>
					<p>A paragraph</p>
					<p style="color: red;">THE END</p>
				</div>
			</div>
		</div>
	</div>
</div>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}