Q: Flexbox vertical grid / dashboard without rows I'm currently trying to create a dashboard in flexbox with 1 item larger then the rest:

It's not so hard to create a grid with flex-grow or just using witdths but the hard part seems to have the 2 smaller items align vertically next to the larger items, what happens is this:

Is this even possible with flexbox?
'Added a simplified version of the code: http://codepen.io/Doordarius/pen/emXLXM/'


A: You're either gravely underestimating the 'sit back and relax' aspect of using flexbox, or you have a lot of requirements placed on the unit -  such as using lists, divs within the flexbox items, minimum/maximum size requirements.
Basically, the easiest way to work a flexbox grid with equal sizing is to:
1) Set every padding/margin you can find to 0.
{padding:0;margin:0;}

2) Create a container the way you want it. Flexbox does well with everything inside of it. 
#activecontainer{
  position:absolute;
  top: 51%; /* (+) offset by 1x AMOUNT*/
  left: 50%;
  transform: translate(-50%, -50%);
  display:inline-block;
  min-height:100% !important;
}

3) Start cutting your shape into columns and rows that don't add space inherently.
.row, .col{display:flex;}
.row{
  flex-direction: row;
  background-color:black;
}
.col{
  flex-direction:column;
  background-color:green;
}

4) Set the final items to a reasonable margin. 
.child{
  display: flex;
  flex:1;
  margin: 1vmin; /* <--- AMOUNT*/
  width:auto;
  height: 100%;
}

...
5) Go back and set offsets based on this margin size if you need to recenter the grid. 
Technically, you should get into some pretty complex nth child for both col and row, but it gets a little crazy without actually handling the margin offsets as a variable in SASS or something similar and your example doesn't require it. 
#dashboard >.row{ padding:1vmin 0; }
#dashboard>.col { padding:0 1vmin; }

So hey, here you go...
http://codepen.io/systemaddict/pen/zKxdZy
