Flexbox +溢出：hiddden只能在Chrome中运行

Question

我的左侧栏的内容出现问题，而且Chrome浏览器以外的任何地方都不尊重overflow:hidden。 在Firefox中，IE和Edge边栏被扩展，而不是被限制在.container div的300个像素。有谁知道如何解决这个问题？

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

Answer 1

试图改变

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

到

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

我觉得有，为什么会出现这个问题有两个原因：

的第一个问题是，IE不接受无单位flex-basis。这就是为什么你必须使用flex: 1 1 0%或flex: 1 1 0px而不是flex: 1 1 0。在这种情况下，flex: 1 1 auto也不起作用。

第二个问题是Chrome和Firefox中display: flex的不同解释。默认情况下，Firefox会在display: flex元素上设置min-height: auto; min-width: auto;，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; 
}