ブラウザのサイズ変更時のDIVSラッピングのパーセンテージ+ px幅

Question

次のSOの質問（Gutter between divs）では、PawełJanickiから素晴らしい回答が得られました。それはほぼ4ヶ月前ですが、私が使用したコードを再訪したところ、IE 11ではウィンドウのサイズを変更すると1行に収まらないことがわかりました。 IEのウィンドウのサイズを変更すると、1行からラップして1行に戻り、その後にラップします.....

これは2つの画像です。最初の画像では、その後、私は、ウィンドウを最小化し、完璧に見える、それが壊れる：

https://i.imgur.com/ueEPzJc.png

https://i.imgur.com/pXP9leB.png

、ここでは、サンプルとcodepenです：

https://codepen.io/anon/pen/xgZMwq

I私がFFやChromeでやりたいと思っているように、誰かがIEでこの動作を修正するのを助けることができれば、本当に感謝しています。

ありがとうございます！以下は

私は古いSO質問から得た最終的なコードされています

.container{ 
 
     font-size: 0; 
 
    } 
 
    [class|="col"] { 
 
     display:inline-block; 
 
     vertical-align: top; 
 
     position:relative; 
 
     font-size:20px; 
 

 
    } 
 
    .col-1-3{ 
 
    \t width:calc(100%/(3/1)); 
 
    } 
 
    .col-2-3{ 
 
    \t width:calc(100%/(3/2)); 
 
    } 
 
    .col-1{ 
 
    \t width:100%; 
 
    } 
 

 
    .children-has-gutters{ 
 
     margin-left:-15px; 
 
     margin-right:-15px; 
 
     width: calc((100%/(3/1)) + 30px); 
 
    } 
 
    .children-has-gutters > div{ 
 
     padding-left:15px; 
 
     padding-right:15px; 
 
     box-sizing: border-box; 
 
    } 
 

 

 
    .bg-blue{ 
 
    \t background-color:#42a5f5; 
 
    \t color:#ffffff; 
 
    } 
 
    .bg-green{ 
 
    \t background-color:#66bb6a; 
 
     color:#ffffff; 
 
    }

<div class="container"> 
 
     <div class="col-1-3 bg-blue">blue left</div> 
 
    \t <div class="col-1-3 children-has-gutters" style="font-size:0px;"> 
 
     
 
     <div class="col-1-3"> 
 
      <div class="bg-green">green 1</div> 
 
     </div> 
 
     <div class="col-1-3"> 
 
      <div class="bg-green">green 2</div> 
 
     </div> 
 
     <div class="col-1-3"> 
 
      <div class="bg-green">green 3</div> 
 
     </div> 
 
      
 
     </div> 
 
    \t <div class="col-1-3 bg-blue">blue right</div> 
 
    </div>

Answer 1

はunlikで

.container{ 
    display:flex; 
    } 
    .col-1-3{ 
     flex:1; 

    } 

.container{ 
 
     font-size: 0; 
 
    } 
 
    [class|="col"] { 
 
     display:inline-block; 
 
     vertical-align: top; 
 
     position:relative; 
 
     font-size:20px; 
 

 
    } 
 

 
    .container{ 
 
    display:flex; 
 
    } 
 
    .col-1-3{ 
 
     flex:1; 
 
    \t 
 
    } 
 
    .col-2-3{ 
 
    \t 
 
    } 
 
    .col-1{ 
 
    \t width:100%; 
 
    } 
 

 
    .children-has-gutters{ 
 
     margin-left:-15px; 
 
     margin-right:-15px; 
 
     
 
    } 
 
    .children-has-gutters > div{ 
 
     padding-left:15px; 
 
     padding-right:15px; 
 
     box-sizing: border-box; 
 
    } 
 

 

 
    .bg-blue{ 
 
    \t background-color:#42a5f5; 
 
    \t color:#ffffff; 
 
    } 
 
    .bg-green{ 
 
    \t background-color:#66bb6a; 
 
     color:#ffffff; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="container"> 
 
     <div class="col-1-3 bg-blue">blue left</div> 
 
    \t <div class="col-1-3 children-has-gutters" style="font-size:0px;"> 
 
     
 
     <div class="col-1-3"> 
 
      <div class="bg-green">green 1</div> 
 
     </div> 
 
     <div class="col-1-3"> 
 
      <div class="bg-green">green 2</div> 
 
     </div> 
 
     <div class="col-1-3"> 
 
      <div class="bg-green">green 3</div> 
 
     </div> 
 
      
 
     </div> 
 
    \t <div class="col-1-3 bg-blue">blue right</div> 
 
    </div>

Answer 2

フレックスソリューションをお試しください、このコード行

2つの計算を持って、最初の割合、その後、PXの追加：エリーも、他の誰かがこの同じ問題につまずくこと、答えは

width: calc((100%/(3/1)) + 30px); 

IE 11はしていないように見えますそれを扱うことができ、それが間違っているとき！ブラウザのサイズを変更すると、答えは自分の割合を自分で計算することです：

width: calc(33.333% + 30px); 

それはちらつきました。