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; }

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

.col-right {
	
	background: purple;
	flex: 2 1 auto;

}

dabblet.html

<div class="outer">
	<div class="header">HEADER</div>	
	<div class="inner">
		<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>

settings.json

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