CSS nested flex box height - css

Question

I have a row layout with a nested flex container in the second flex item of the root container. I want the nested flex container to be 100% of the used height of its parent.
<div class="steps root"><!--root container-->
<div class="step one">
I am very tall. Others should be as high as I am!
</div>
<div class="step two-and-three">
<div class="steps"><!--nested container-->
<div class="step two">
nested child 1. should have 100% vertical height
</div>
<div class="step three">
nested child 2. should have 100% vertical height
</div>
</div>
</div>
Here is the fiddle demonstrating the issue: http://jsfiddle.net/2ZDuE/316/
If I set an explicit height to my nested flex container, then everything works.
How to tell the nested container to automatically fill up vertical space of its container?

Answer 1

add display:flex to .step.two-and-three and remove padding-bottom
.steps.root {
width: 700px;
}
.steps.root>.step.one {
height: 300px;
/*simulate big content in left column*/
}
.steps {
display: flex;
}
.step.one {
flex: 1 1 33%;
background-color: rgba(0, 0, 0, 0.1);
}
.step.two-and-three {
flex: 2 1 66%;
background-color: grey;
display: flex; /* added */
}
.step.two {
flex: 1 1 50%;
background-color: green;
}
.step.three {
flex: 1 1 50%;
background-color: lime;
}
.step.two-and-three>.steps {
background-color: olive;
padding-bottom: 10px;
}
<div class="steps root">
<!--root container-->
<div class="step one">I am very tall. Others should be as high as I am!</div>
<div class="step two-and-three">
<div class="steps">
<!--nested container-->
<div class="step two">nested child 1. should have 100% vertical height</div>
<div class="step three">nested child 2. should have 100% vertical height</div>
</div>
</div>
</div>