フレックスボックスの列とIE

Question

すべてがChromeとFirefoxでうまく動作しますが、IEで問題があります。 （IE11）

私のレスポンシブルなレイアウトでは、タブレット/モバイルモードでは、pcモードでは水平で、verticalではメニューにしたいと考えています。それだけですが、IEではメニュー項目の高さがありません。開発ツールで検査すると、すべて0の高さに崩れます。なぜ私は見つけることができません。

誰でも知っていると思いますか？

私はそれのために作られたcodepen：ここ http://codepen.io/Reblutus/pen/qjacv

をコード.headerContainer nav > a修正問題でflexの項目を削除

<style> 
header { background: cyan;} 
nav { background: bisque;} 
.main-a { background: tomato;} 
.main-b { background: lightblue;} 
footer { background: lightpink;} 

.headerContainer nav { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-flow: column nowrap; 
    flex-direction: column; 
} 

.headerContainer nav > a { 
    padding: 5px 10px; 
    text-align: center; 
    background: #fcd113; 
    border: #6eac2c solid 1px; 
    border-width: 0 0 1px; 
    -webkit-box-flex: 1; 
    -moz-box-flex: 1; 
    -webkit-flex: 1; 
     -ms-flex: 1; 
      flex: 1; 
} 
@media all and (min-width: 600px) { 
    .wrapper { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-flow: row nowrap; 
    flex-direction: row; 
    } 
    .wrapper > .headerContainer { 
    -webkit-box-flex: 1; 
     -moz-box-flex: 1; 
    -webkit-flex: 1; 
     -ms-flex: 1; 
      flex: 1; 
    } 
    .wrapper > .mainContainer { 
    -webkit-box-flex: 2; 
     -moz-box-flex: 2; 
    -webkit-flex: 2; 
     -ms-flex: 2; 
      flex: 2; 
    } 
    .mainContainer { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-flow: row nowrap; 
    flex-direction: row; 
    } 
    .mainContainer .main-a { 
    -webkit-box-flex: 2; 
     -moz-box-flex: 2; 
    -webkit-flex: 2; 
     -ms-flex: 2; 
      flex: 2; 
    -webkit-box-ordinal-group: 2; 
     -moz-box-ordinal-group: 2; 
    -ms-flex-order: 2; 
    -webkit-order: 2; 
      order: 2; 
    } 
    .mainContainer .main-b { 
    -webkit-box-flex: 1; 
     -moz-box-flex: 1; 
    -webkit-flex: 1; 
     -ms-flex: 1; 
      flex: 1; 
    -webkit-box-ordinal-group: 1; 
     -moz-box-ordinal-group: 1; 
    -ms-flex-order: 1; 
    -webkit-order: 1; 
      order: 1; 
    } 
} 

@media all and (min-width: 800px) { 
    .wrapper { 
    display: block; 
    } 
    .headerContainer { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-flow: row nowrap; 
    flex-direction: row; 
    } 
    .headerContainer header { 
    -webkit-box-flex: 1 200px; 
     -moz-box-flex: 1 200px; 
    -webkit-flex: 1 200px; 
     -ms-flex: 1 200px; 
      flex: 1 200px; 
    } 
    .headerContainer nav { 
    -webkit-box-flex: 1 100%; 
     -moz-box-flex: 1 100%; 
    -webkit-flex: 1 100%; 
     -ms-flex: 1 100%; 
      flex: 1 100%; 
    -webkit-flex-flow: row nowrap; 
    flex-direction: row; 
    } 
} 
</style> 
<div class="wrapper"> 
    <div class="headerContainer"> 
     <header>Logo <i class="fa fa-camera-retro"></i>   </header> 
    <nav> 
      <a href="javascript:;">Home</a> 
      <a href="javascript:;">About Us</a> 
      <a href="javascript:;">Our Properties</a> 
      <a href="javascript:;">Clients & Partners</a> 
     </nav> 
    </div> 
    <div class="mainContainer"> 


<div class="main main-a">Main content A</div> 
<div class="main main-b">Main content B</div> </div> 
</div> 
<footer>footer</footer> 

Answer 1

私はIE11で非常に似た問題がありました。

明らかに問題はIEのflexプロパティの実装と関係しています。

フレックスのデフォルト値は最新の仕様で として定義されている0 1 autoではなく0 0 autoです。

出典：http://caniuse.com/#feat=flexbox

が明示的に1 0 autoにflexプロパティを設定するには、私の場合のための問題を解消。

flexプロパティが設定されている場所であれば、この明示的な形式と一致するように値を更新してください。

Answer 2

です。 IE11とChromeでテストされています。

...しかし、それはより広いレイアウトを破ります。だから、800px以上のメディアクエリのために戻す必要があります。