Flex dilemna

HTML

<div class="parent">
	<div class="green"></div>
	<div class="red"></div>
	<div class="red"></div>
	<div class="blue"></div>
</div>

CSS

.parent {
	display: flex;
  flex-flow:column;
  flex-wrap:wrap;
  height:300px;
}
.green, .red, .blue {
	width: 50px;
  box-sizing:border-box;
}
.green, .blue {
	height: 300px;
}
.red {
	height: 150px;
	border: 5px solid red;
}
.green {
	border: 5px solid green;
}
.blue {
	border: 5px solid blue;
  }
  .parent :last-child {
  margin:0 100% 0 0
}