css - Flex box children have height 100% of the parent

Question

the following is my menu structure:

<ul>
<li> menu 1</li>
<li> menu 2<br/> description</li>
<li> menu 3</li>
<li> menu 4</li>

</ul>

as you noticed the second menu have a height different than other siblings cause of it's content

so take alook at the css

ul{
display:flex;
flex-direction:row;
flex-wrap: nowrap;
}
ul>li{
background-color:blue;
border:2px solid red;
}

this will display ul as a menu with items side by side in the center of the containing parent "ul" but unfortunately with different height
so how i can make children have the 100% of their parent using flexbox without adding custom height in pixel?

Answer 1

Put an align-self: stretch on the ul>li.

Check out the sample : http://cssdeck.com/labs/full/nttaiab7/