Flexbox +オーバーフロー：hidddenはChromeでのみ動作します

Question

Chromeブラウザ以外では、左側のサイドバーの内容に問題があります。overflow:hiddenを尊重していません。 Firefoxでは、.container divの300ピクセルに制限される代わりに、IEとEdgeのサイドバーが拡張されています。誰もがこの動作を修正する方法を知っていますか？

https://jsfiddle.net/o1uu1d0L/2/

Answer 1

私はこの問題が発生した二つの理由があると思い

.flex-fill { 
    display:flex; 
    min-height: 0; 
    flex:1 1 0%; 
} 

に

.flex-fill { 
    display:flex; 
    flex:1 1 auto; 
} 

を変更してください：

は、最初の問題はIEにはないということです単位なしflex-basisを受け入れます。そのため、flex: 1 1 0%またはflex: 1 1 0pxを使用する必要がありますが、flex: 1 1 0では使用できません。この場合でもflex: 1 1 autoは機能しませんでした。

第2の問題は、ChromeとFirefoxでdisplay: flexの解釈が異なることです。デフォルトでは、Firefoxはをdisplay: flex要素に設定し、Chromeはmin-height: 0; min-width: 0と設定します。そして、あなたが必要とするのは第二の選択肢です。

この単純な変更がすべての問題を解決するかどうかはわかりません（ただし、IEとFirefoxでテストしたときには問題ありません）。そうでない場合は、私が書いたことを考えて、他のクラスで同様の変更を加えてください。私はそれが助けることを願っていますいくつかの変更と

Answer 2

あなたのコード：

<div class="container"> 
    <div class="flex-col flex-fill"> 
     <div class="flex-row flex-fill"> 
      <div class="flex-col flex-50 dragscroll default-box" style="margin-right:5px;"> 
       <div class="button selected">1</div> 
       <div class="button">2</div> 
       <div class="button selected">3</div> 
       <div class="button">4</div> 
       <div class="button">5</div> 
       <div class="button selected">6</div> 
       <div class="button selected">7</div> 
       <div class="button">8</div> 
       <div class="button">9</div> 
       <div class="button">10</div> 
      </div> 

      <div class="flex-fill default-box"> 
       center 
      </div> 

      <div class="flex-250 default-box" style="margin-left:5px;"> 
       side 
      </div> 
     </div> 

     <div class="default-box flex-50" style="margin-top:5px;"> 
      bottom 
     </div> 
    </div> 
</div> 

.container { 
    width:500px; 
    height:300px; 
    display:flex; 
    flex-flow:column; 
    background:lightblue; 
} 

.buttons-container { 
    min-height:1px; 
    height:100%; 
    flex:0 1 50px; 
    border:1px solid #CCC; 
    background:#FFF; 
    margin-right:5px; 
    overflow:hidden; 
    display:flex; 
    flex-flow:column; 
} 

.flex-col { 
    display:flex; 
    flex-flow:column; 
    overflow:hidden; 
} 

.flex-row { 
    display:flex; 
    flex-flow:row; 
    overflow:hidden; 
} 

.flex-fill { 
    display:flex; 
    flex:1 1 auto; 
} 

.flex-50 { 
    display:flex; 
    flex:0 0 50px; 
} 

.flex-250 { 
    display:flex; 
    flex:0 0 250px; 
} 

.default-box { 
    background:#FFF; 
    border:1px solid #CCC; 
} 

.plot-area { 
    display:block; 
    position:relative; 
    flex:1 1 auto; 
    background:#FFF; 
    border:1px solid #CCC; 
    box-shadow:1px 1px 4px rgba(0,0,0,0.1); 
} 

.button { 
    background:#cfeceb; 
    vertical-align:middle; 
    margin-bottom:5px; 
    text-align:center; 
    color:#56b6b2; 
    cursor:pointer; 
    font-size:26px; 
    flex:1 1 auto; 
    display:flex; 
    flex-direction:column; 
    justify-content:center; 
    min-height:50px; 
} 

.button.selected { 
    background:#56b6b2; 
    color:#FFF; 
} 

.button:last-child { 
    margin:0 !important; 
}