Flex Box Help

by dylanstark

HTML

<div class='wrap'>
<div class='wrap_col'>
  <div class='wrap_item big'></div>
</div>
<div class='wrap_col'>
  <div class='wrap_item'></div>
  <div class='wrap_item'></div>
  <div class='wrap_item'></div>
</div>
</div>

CSS

.wrap {
  display: flex;
  flex-flow: row wrap;
  margin: 0 auto;
  background-color:blue;
  height:300px;
}

.wrap_col {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  height:100%;
}

.wrap_item {
  height:100px;
  margin:10px;
  display: flex;
  flex:1 1 auto;
  flex-direction: column; 
  background-color:yellow;
}

.big {
  height:600px;
}