Dislay flex和auto height（100％）里面 [英] Dislay flex and auto height (100%) inside
本文介绍了Dislay flex和auto height（100％）里面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图做flex网格，但我想像任何列具有相同的高度。
I'm trying to do flex grid but I want to make like any column have same height.
它适用于IE和Firefox，但不适用于Chrome和Opera。
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>
可以不使用JS吗？
任何人都可以告诉我的问题在哪里
It is possible to do without JS? Anyone Can tell my where is my problem
推荐答案
将您的列表项设置为
display：flex;
display: flex;
#test li{
display: flex;
height: auto;
border: 1px solid orange;
font-size: 30px;
padding: 50px;
}
从.blue，红色和绿色选择器中删除高度
And remove the height from the .blue, red and green selectors
.blue {
background: blue;
}
.red {
background: red;
}
.green {
background: green;
}
示例：
这篇关于Dislay flex和auto height（100％）里面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
