div.flex {
	display: flex;
	overflow: hidden;
	width: 100%;
	height: 100%;
	flex: 1;
}

/*
div.flex-item > flex {
	position: absolute;
	width: 100%;
	height: 100%;
}
*/

div.split-h {
	flex-direction: row;
}

div.split-v {
	flex-direction: column;
}

div.flex-item {
	overflow: auto;
	flex: 1;
}

div.flex > .resizer {
	flex: 0 0 6px; /* resizer size */
	background-color: #aaa;
	background-repeat: no-repeat;
	background-position: center;
}

div.split-h > .resizer {
	cursor: ew-resize;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='30'><path d='M2 0 v30 M5 0 v30 M8 0 v30' fill='none' stroke='black'/></svg>");
}

div.split-v > .resizer {
	cursor: ns-resize;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='10'><path d='M0 2 h30 M0 5 h30 M0 8 h30' fill='none' stroke='black'/></svg>");
}