AVEF/imports/ui/styles/maxHeightLayout.import.styl

section.maxHeightContainer, div.maxHeightContainer
	display: table
	height: 100%
	width: 100%
	section.maxHeightRow, div.maxHeightRow
		display: table-row
		section.maxHeightContent, div.maxHeightContent  //Use this for a row of content that should shrink to fit the content size.
			display: table-cell
			height: 1px
		section.maxHeightContentExpandAndScroll, div.maxHeightContentExpandAndScroll  //Use this for a row of content that should take up all remaining space and will contain potentially scrolled content.
			display: table-cell
			height: 100%
			position: relative
			section.maxHeightContentScrolled, div.maxHeightContentScrolled  //Use this to create the scrolled content.  Can use any display within it.
				position: absolute
				top: 0
				bottom: 0
				left: 0
				right: 0
				width: auto
				height: auto
				overflow-y: auto

// *****************
// ** Vertical Stack
// ** Use .verticalStack on containers, and .vscFixed or .vscExpand on children (they can also be containers).
// ** Designed to use Flexbox to allow full screen (vertical) layouts.  Fixed children will fit the content, and expand children will consume all available vertical space, but will not exceed the vertical space.
// ** Use .columnContainer to setup a horizontally scrolling, full height container where children are tiled down first, then wrap to the next column.
/*
	Test Code:
-------CSS------
* {
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
  min-height: 100%;
}
body {
  background: purple;
  color: black;
  min-height: 100%;
  height: 100%;
}
.vscFixed {
  flex: 0 0 auto;
  width: 100%;
}
.vscExpand {
  flex: 1 1 1px;
  width: 100%;
}
.verticalStack {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: stretch;
}
.columnContainer {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column wrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: flex-start;
  overflow-x: auto;
  background: white;
}
.columnContent {
  flex: none;
  width: 300px;
}
-------Javascript------
var container = document.querySelector('.columnContainer');
for(var i = 0; i < 400; i++) {
  var child = document.createElement("div");
  child.innerHTML = "Element " + i;
  child.className = "columnContent";
  container.appendChild(child);
}
-------HTML------
<div class="verticalStack">
  <div class='vscFixed' style="width: 100%; background:green">
  <p>
  Some content.
  </p>
  <p>
  More content...
  </p>
  </div>
  <div class="verticalStack vscExpand">
    <div class='vscFixed' style="background: yellow;">
      Test bar.
    </div>
    <div class="columnContainer vscExpand">
    </div>
  </div>
</div>
 */
.vscFixed {
	flex: 0 0 auto;
	width: 100%;
}
.vscExpand {
	flex: 1 1 1px;
	width: 100%;
}
.verticalStack {
	width: 100%;
	height: 100%;
	display: flex;
	flex-flow: column;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: stretch;
}
.columnContainer {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: flex-start;
	overflow-x: auto;
}
.columnContent {
	flex: none;
}