フレックスボックスグリッドがIE10/11で整列していません

Question

整列する必要がある大きな画像の横に2x2のグリッドがあります。 （here's a codepen）私はBootstrap 3.3.7とFlexboxの組み合わせを使いました。私はちょうどこれを修正しようと壁に私の頭を打っている。

私は2x2グリッドのすべてを一列に配置しています。

 <div class="row || flex-row"> 
      <div class="col-xs-12 || col-md-6 || core-values-left"> 
       <div> 
        <img class="img-responsive" src="http://impact-web.azurewebsites.net/wp-content/uploads/2017/02/corevaluesmain-1.jpg"> 
       </div> 
      </div> 

      <div class="col-xs-12 || col-md-6 || core-values-right"> 
       <div class="row"> 
        <div class="col-xs-12 || col-md-6 || core-values-section"> 
         <div class="core-values-img"> 
          <img class="img-responsive" src="http://impact-web.azurewebsites.net/wp-content/uploads/2017/02/coretopleft.jpg"> 

          <h4 class="core-values-heading">We Scout</h4> 

          <div class="core-hover"> 
           <h5>We are a talent scout and agent for the grocery industry</h5> 
           <div> 
            <a href="http://www.google.com" class="btn || btn-secondary || hover-btn">Learn more</a> 
           </div> 
          </div> 
         </div> 
        </div> 

        <div class="col-xs-12 || col-md-6 || core-values-section"> 
         <div class="core-values-img"> 
          <img class="img-responsive" src="http://impact-web.azurewebsites.net/wp-content/uploads/2017/02/coretopright-1.jpg"> 

          <h4 class="core-values-heading">We Discover</h4> 

          <div class="core-hover"> 
           <h5>We seek out new CPG opportunities and innovations</h5> 
           <a href="http://www.google.com" class="btn || btn-secondary || hover-btn">Learn More</a> 
          </div> 
         </div> 
        </div> 
       </div> 

       <div class="row"> 
        <div class="col-xs-12 || col-md-6 || core-values-section"> 
         <div class="core-values-img"> 
          <img class="img-responsive" src="http://impact-web.azurewebsites.net/wp-content/uploads/2017/02/corebottomleft.jpg"> 

          <h4 class="core-values-heading">We Grow</h4> 

          <div class="core-hover"> 
           <h5>We expand your brand’s horizons and elevate your success</h5> 
           <a href="http://www.google.com" class="btn || btn-secondary || hover-btn || hover-btn">Learn more</a> 
          </div> 
         </div> 
        </div> 

        <div class="col-xs-12 || col-md-6 || core-values-section"> 
         <div class="core-values-img"> 
          <img class="img-responsive" src="http://impact-web.azurewebsites.net/wp-content/uploads/2017/02/corebottomright.jpg"> 

          <h4 class="core-values-heading">We Champion</h4> 

          <div class="core-hover"> 
           <h5>We value our client relationships and always go the extra mile</h5> 
           <a href="http://www.google.com" class="btn || btn-secondary || hover-btn">Learn more</a> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 

次に、このCSSを行と列に適用して、flexで整列させました。

に別のdiv内の行をラッピング列

へのmin-heightを追加

• ：IE

  私が試した

  .flex-row { 
      display: -webkit-box; 
      display: -ms-flexbox; 
      display: flex; 
      -ms-flex-wrap: wrap; 
       flex-wrap: wrap; } 
      .flex-row > [class*='col-'] { 
      display: -webkit-box; 
      display: -ms-flexbox; 
      display: flex; 
      -webkit-box-orient: vertical; 
      -webkit-box-direction: normal; 
       -ms-flex-direction: column; 
        flex-direction: column; } 
  

  物事を除いて....魔法のように動作します 非フレックスコンテナにする

• 行と列のフレックス：1 1 0％を明示的に設定する
• 魔法のランプをこすると に精霊を召喚は私の問題解決

誰が起こっかもしれないものの手掛かりを持ってい???私はIEがそんなに嫌いです。

Answer 1

まずあなたが楽しいか、簡単であることからコーディングを防止することができる限りのことをしてIE、...

は、その後、あなたがIE10とIE11で多くのflexbox-related bugsを持っている...

はそれに追加flex-direction: columnに関連する複数のバグ...

は、最終的にフレックス項目への画像（課題や矛盾の完全に異なるセットを）投げる...

そして、あなたはかなりTROを見つけることが保証されていますuble。

フレックスコンテナをcolumnからrowに切り替えることをお勧めします。これにより、IEのブラウザでレイアウトを簡単に処理できるようになります。

これらの調整を試してみてください。

.flex-row > [class*='col-'] { 
    display: flex; 
    /* flex-direction: column; */ 
    flex-direction: row; /* new */ 
    flex-wrap: wrap; /* new */ 
    align-content: space-between; /* new */ 
} 
.core-values-left > div { 
    flex: 1; /* new */ 
} 

revised codepen