Display Flex And Auto Height (100%) Inside

I'm trying to do flex grid but I want to make like any column have same height. It work perfect for IE and Firefox, but in Chrome and Opera not. http://jsfiddle.net/micchaleq/Nz6f

Solution 1:

Set your list items to

display: flex;

#testli{
    display: flex;
    height: auto; 
    border: 1px solid orange; 
    font-size: 30px; 
    padding: 50px;
}

And remove the height from the .blue, red and green selectors

.blue { 
    background: blue;        
}

.red {
    background: red;
}

.green {
    background: green;  
}

Example here:

http://jsfiddle.net/m4e3f/