Flex Box Help

by evild70

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;
}