A CodePen by Leevi Graham.

index.html

	<div id="page" class="box stacked">
		<div class="primary toolbar">Toolbar</div>
		<div class="box flex">
			<div class="primary sidebar">
				Width:
							<button onclick="$(this).parent().width('+=100');">Increase</button>
							<button onclick="$parent = $(this).parent(); if($parent.width() >= 200) { $parent.width('-=100') } ;">Decrease</button>
			</div>
			<div class="box stacked flex">
				<div class="secondary toolbar">
					Toolbar
      <button onclick="$parent = $(this).parent(); $clone = $parent.clone(); $clone.insertAfter($parent)">Clone</button>
      <button onclick="$(this).parent().remove();">Remove</button>
				</div>				
				<div class="box flex">
					<div class="sidebar box stacked">
						<div class="toolbar" style="height:100px; background:purple">
							Height:
							<button onclick="$(this).parent().height('+=100');">Increase</button>
							<button onclick="$parent = $(this).parent(); if($parent.height() >= 200) { $parent.height('-=100') } ;">Decrease</button>
						</div>
						<div class="flex" style="background:pink">Width:
							<button onclick="$(this).parent().parent().width('+=100');">Increase</button>
							<button onclick="$parent = $(this).parent().parent(); if($parent.width() >= 200) { $parent.width('-=100') } ;">Decrease</button></div>
					</div>
					<div class="flex content" style="background:yellow">Content</div>
				</div>
			</div>
		</div>
		<div class="footer">Footer</div>
	</div>

style.css

* {
  -webkit-transition:all .1s;
 }


html, body, #page {
	font-family:sans-serif;
  font-size:10px;
	margin:0;
	padding:0;
	width:100%;
	height:100%;
}
.box {
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
 }

 .box.stacked{
 	-webkit-box-orient: vertical; 	/* OLD - iOS 6-, Safari 3.1-6 */
  	-moz-box-orient: vertical; 		/* OLD - Firefox 19- */
 	-webkit-flex-direction: column;  	/* Chrome */
 	-ms-flex-direction: column; 		/* IE 10 */
 	flex-direction: column; 			/* NEW, Spec - Opera 12.1, Firefox 20+ */
 }

 .flex {
 	-webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
  	-moz-box-flex: 1;         /* OLD - Firefox 19- */
  	-webkit-flex: 1;          /* Chrome */
  	-ms-flex: 1;              /* IE 10 */
  	flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.toolbar {
	border-bottom: 1px solid rgba(0,0,0,.2);
	height:40px;
}
.toolbar.primary {
	background: #3892E3;
}
.toolbar.secondary{
	background: #F3F3F3;
}
.toolbar.footer {
	background: #000;
	color:#fff;
}
.sidebar {
	border-right: 1px solid rgba(0,0,0,.2);
	width:200px;
}
.sidebar.primary {
	background: #E6E6E6;
}
.footer {
	background:#333;
	color:#fff;
	padding:10px;
}