.flex-container,
.flex-item-auto-size {
	display: flex; 
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
}

.flex-item-fixed-size {
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: auto;
}

.flex-item-auto-size {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: auto;
	overflow: auto;	
}


.flex-container.hflex {
	flex-direction: row;
	width: 100%;	
}

.flex-container.hflex > .flex-item-fixed-size {
	height: 100%;
}


.hflex-container {
	height: 100%;
	display: flex; 
	flex-direction: row;
}

.hflex-item-fixed-size {
	height: 100%;
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: auto;
}

.hflex-item-auto-size {
	height: 100%;
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: auto;
	overflow: auto;	
	box-sizing: border-box
}

.flex-row {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.flex-wrap{
	flex-wrap: wrap;
}

.flex-col {
	display: flex;
	flex-direction: column;
}