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/Nz6fC/

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>min-height test</title>
    <style type="text/css"> 
    html, body { padding: 0px; margin: 0px; height: 100%; text-align: center; }
    #test{ display: flex; border: 1px solid blue; list-style: none; padding: 0; margin: 0; }
    #test li{display: inline-block; height: auto; border: 1px solid orange; font-size: 30px; padding: 50px;}
    .blue{ background: blue; height: 100%; }
    .red{background: red;  height: 100%;}
    .green{background: green;  height: 100%;}
    </style>
</head>
<body>
    <ul id="test">
        <li><div class="blue">test<br/>test</div></li>
        <li><div class="red">test<br/><br/><br/>test</div></li>
        <li><div class="green">test<br/><br/>test</div> </li>   
    </ul>
</body>
</html>

It is possible to do without JS? Anyone Can tell my where is my problem

回答1:

Set your list items to

display: flex;

#test li{
    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/

来源：https://stackoverflow.com/questions/24701109/display-flex-and-auto-height-100-inside

标签

html

css

google-chrome

opera