display: -webkit-flex;
「フレックスボックス」を定義するために新しい構文を使用していますが、機能しない-webkit-box-flex: 1;
ため、要素が残りのスペースを取ります。
display: box;
古い構文であるを使用すると、正常に動作します ( http://flexiejs.com/playground/の例)。クロムが新しい標準( http://flexiejs.com/playground/ )をサポートしていることを提案できますか。
Firefox では正常に動作します (現在、IE ではテストできません)。
これが私のサンプルコードです(Fiddle):
<html>
<head>
<title>Test</title>
<script src="modernizr.min.js"></script>
<style>
.wrapper {
/* old syntax */
display: -webkit-box;
display: -moz-box;
/* new syntax */
display: -webkit-flex;
display: -moz-flex;
display: -o-flex;
display: -ms-flex;
display: flex;
border: 1px solid;
}
html, body, .wrapper {
width: 100%;
margin: 0;
padding: 0;
}
.element {
border: 1px solid black;
margin: 10px;
padding: 10px;
min-width: 300px;
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
}
.no-flexbox .wrapper .element {
float: left;
width: 300px;
}
.no-flexbox .wrapper .clear {
clear: both;
}
.flexbox .wrapper .clear {
display: none;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="element">
<h1>hello world</h1>
<p>
Lorem ipsum<br />
Lorem ipsum
</p>
<p>Lorem ipsum</p>
</div>
<div class="element">
<h1>hello world</h1>
<p>
Lorem ipsum
</p>
<p>Lorem ipsum</p>
</div>
<div class="clear"></div>
</div>
</body>
</html>