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

Question

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.

Answer 1

Use align-items: stretch

Similar to David Storey's answer, my workaround is:

.flex-2 {     display: flex;     align-items: stretch; } 

Note that height: 100% should be removed from the child component (see comments).

Alternatively to align-items, you can use align-self just on the .flex-2-child item you want stretched.