Flexbox +溢出:hiddden只在Chrome中工作
我的左侧侧边栏的内容有问题，除了Chrome之外，其他任何地方都不尊重overflow:hidden。在火狐，IE和边缘边栏被扩展，而不是被限制在300个像素的.container div。有人知道如何纠正这种行为吗？
回答 2
Stack Overflow用户
发布于 2016-11-22 14:12:38
试着改变
.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的不同解释。默认情况下，火狐将min-height: auto; min-width: auto;设置为display: flex元素，Chrome将其设置为min-height: 0; min-width: 0。你需要的是第二个选择。
我不确定这个简单的改变是否能解决你所有的问题(但当我在IE和Firefox上测试它时，它看起来还不错)。如果没有，请考虑一下我写了什么，并在其他类中做类似的修改。我希望这会有帮助！
Stack Overflow用户
发布于 2016-11-22 14:22:54
你的代码有几处改动：
<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;
}https://stackoverflow.com/questions/40743754
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号