このスタックオーバーフローのトピックを注意深く読みました
csstricksのこの記事
すべてのプレフィックスを使用してレイアウトを最新のブラウザーで機能させようとしましたが、Chrome でのみ機能します。他のブラウザでは、flex アイテムは flex 値 (幅) を失いました。何が問題なのか理解できません。
私は大いに感謝し、助けとアドバイスをします！ありがとうございました！
デモ
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>nested flex</title>
</head>
<body>
<header>Привет мир!</header>
<div class="wrap">
<div class="item1">red</div>
<div class="item_nested">
<div class="b">blue</div>
<div class="c">green</div>
</div>
</div>
<footer>Прощай мир!</footer>
</body>
</html>
.wrap {
display: -moz-box;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
height: 100%;
-moz-box-orient: horisontal;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
max-width: 1200px;
}
.item1 {
width: 70%; /* No flex here,
-moz-box-flex: 1; /* OLD - Firefox 19- */
background: #eee;
}
.b {
background: #ddd; height:50%;
}
.c {
background: #ccc; height:50%;
}
.item_nested {
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
width: 20%; /* For old syntax, otherwise collapses. */
-webkit-flex: 1; /* Chrome */
-ms-flex: 1; /* IE 10 */
flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
@media all and (max-width: 600px) {
.wrap {-moz-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.wrap > .a, .wrap > .item_nested {width: auto;}
.b.c {
height:auto;
}
.item1 {
width: 100%;
}
}