How can I make Flexbox children 100% height of their parent?

I'm trying to fill the vertical space of a flex item inside a Flexbox.

.container {  height: 200px;  width: 500px;  display: flex;  flex-direction: row;}.flex-1 {  width: 100px;  background-color: blue;}.flex-2 {  position: relative;  flex: 1;  background-color: red;}.flex-2-child {  height: 100%;  width: 100%;  background-color: green;}

<div class="container"><div class="flex-1"></div><div class="flex-2"><div class="flex-2-child"></div></div></div>

And here's the JSFiddle

flex-2-child doesn't fill the required height except in the two cases where:

1. flex-2 has a height of 100% (which is weird because a flex item has a 100% by default + it is buggy in Chrome)
2. flex-2-child has a position absolute which is also inconvenient

This doesn't work in Chrome or Firefox currently.