在内部显示 flex 和 auto height (100%)答案

【问题标题】：Display flex and auto height (100%) inside在内部显示 flex 和 auto height (100%)
【发布时间】：2014-07-11 15:18:10
【问题描述】：

我正在尝试做弹性网格，但我想让任何列都具有相同的高度。

它适用于 IE 和 Firefox，但不适用于 Chrome 和 Opera。

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>

没有JS可以吗？任何人都可以告诉我我的问题在哪里

【问题讨论】：

演示中的所有 flex 孩子 (<li>) 已经具有相同的高度。其中的 div 不是 flex 子对象，在我看来与 flex 无关。

标签： html css google-chrome opera

【解决方案1】：

将列表项设置为

显示：弹性；

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

并从 .blue、red 和 green 选择器中移除高度

.blue { 
    background: blue;        
}

.red {
    background: red;
}

.green {
    background: green;  
}

此处示例：

http://jsfiddle.net/m4e3f/

【讨论】：