FlexBox Columns in Flex Box Rows

Only FFX, lets me put a bunch of flexible columns in a series of flexible rows and stretches the bottom columns equally across the row

by Dug Sohn

HTML

<div class="toolbar"><h2>Tools</h2>
</div>
<div class="grid first">
<div class="col">

<div class="colContainer">
  <div class="fluid">
    <h2>Drop Target  </h2>
  </div>
  <div class="fixed">
    <h2>Widget</h2>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  </div>
  <div class="fluid">
    <h2>Drop Target  </h2>
  </div>
</div>
</div>
<div class="col">

<div class="colContainer">
  <div class="fluid">
    <h2>Drop Target  </h2>
  </div>
  <div class="fixed">
    <h2>Widget</h2>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  </div>
    <div class="fluid">
    <h2>Drop Target  </h2>
  </div>
  <div class="fixed">
    <h2>Widget</h2>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  </div>
    <div class="fluid">
    <h2>Drop Target  </h2>
  </div>
  <div class="fixed">
    <h2>Widget</h2>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  </div>
  <div class="fluid">
    <h2>Drop Target</h2>
  </div>
</div>
</div>
<div class="col">

<div class="colContainer">
  <div class="fluid">
    <h2>Drop Target  </h2>
...

CSS

html,body {
    height:100%;
	margin:0;
}


.toolbar {
	height:70px;
	background:black;
	color: #FFFF;
	position:fixed;
	width:100%;
	top:0
}
.toolbar h2 {color:#fff; padding: 0 50px;}

.first {
			margin-top:80px;

	}
.grid {
	/*  As of August 2012, only supported in Chrome 21+ */
	display: -webkit-flex;
	display: flex;
	min-height:100%;
	margin-left:1em;
	margin-right:1em;
	}
.col {
    display:inline-block;
	flex: 1;
	-webkit-flex: 1;
	min-height:100%;
	border:1px dotted #ececec;
	padding:0 1em;
	box-sizing:border-box;
	margin-right:-1PX;

}

.colContainer {
	/*  As of August 2012, only supported in Chrome 21+ */
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	overflow:visible;
  	min-height:100%;
	height:100%;	
}
	
.fluid:last-child {
	flex: 1;
	-webkit-flex: 1;
}
.fluid {
	margin:5px;
	color: #FFF;
	text-align:center;
	text-transform:uppercase;
	text-shadow: 1px 1px 2px #fff;
	font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
	border:1px solid #fff;
	height:15px;
	overflow:hidden;

}
.fluid:hover {
	border:1px dashed #92DCF1;
	background-color: #DCECF6;
	color: #92DCF1;
	text-align:center;
	text-transform:uppercase;
	text-shadow: 1px 1px 2px #fff;
    min-height:70px;
	height:auto;
	font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
	   -webkit-transition: background 100ms ease-in 100ms,color 200ms ease-in 100ms; /* property duration timing-function delay */
    -moz-transition: background 100ms ease-in 100ms, color 200ms ease-in 100ms;
    -o-transition: background 100ms ease-in 100ms, color 200ms ease-in 100ms;
    transition: background 100ms ease-in 100ms, color 200ms ease-in 100ms;

}

.fixed {
	background: #ececec;
	margin:5px;
	border-radius:20px;
	padding:20px
}

JavaScript

$( document ).ready(function() {

$('.grid').each(function(){
       var colHeight = $(this).find('.col').height();   
            $(this).find('.colContainer').height(colHeight);
});
});