Html Flexbox&x2B；溢出：隐藏仅在Chrome中有效

除了Chrome浏览器之外，我的左侧边栏的内容不符合

overflow:hidden

。 在Firefox中，IE和Edge边栏被扩展，而不是被限制为300像素的

.container

div。有人知道如何修复这种行为吗

尝试更改

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

到

我认为出现这个问题有两个原因：

第一个问题是IE不接受无单位

flex-basis

。这就是为什么您必须使用

flex:10%

或

flex:10px

而不是

flex:10

。在这种情况下，

flex:11 auto

也不起作用

第二个问题是Chrome和Firefox中对

display:flex

的不同解释。Firefox默认设置

minheight:auto；最小宽度：自动显示：flex

元素，Chrome将其设置为

最小高度：0；最小宽度：0

。你需要的是第二种选择

---

我不确定这个简单的改变是否能解决你所有的问题（但当我在IE和Firefox上测试它时，它看起来还行）。如果没有，请想想我写了什么，并在其他课程中做类似的修改。我希望这会有帮助

您的代码有一些更改：

<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;
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
居中
一边
底部
.集装箱{
宽度：500px；
高度：300px；
显示器：flex；
柔性流动：柱；
背景：浅蓝色；
}
.按钮容器{
最小高度：1px；
身高：100%；
flex:0150px；
边框：1px实心#CCC；
背景：#FFF；
右边距：5px；
溢出：隐藏；
显示器：flex；
柔性流动：柱；
}
.flex col{
显示器：flex；
柔性流动：柱；
溢出：隐藏；
}
.弹性行{
显示器：flex；
柔性流：行；
溢出：隐藏；
}
.柔性填料{
显示器：flex；
flex:1自动；
}
.flex-50{
显示器：flex；
flex:050px；
}
.flex-250{
显示器：flex；
柔性：0 250像素；
}
.默认框{
背景：#FFF；
边框：1px实心#CCC；
}
1.地块面积{
显示：块；
位置：相对位置；
flex:1自动；
背景：#FFF；
边框：1px实心#CCC；
盒影：1px1p4pRGBA（0,0,0,0.1）；
}
.按钮{
背景：#cfeceb；
垂直对齐：中间对齐；
边缘底部：5px；
文本对齐：居中；
颜色：#56b6b2；
光标：指针；
字号：26px；
flex:1自动；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
最小高度：50px；
}
.button.selected{
背景#56b6b2；
颜色：#FFF；
}
.按钮：最后一个孩子{
边距：0！重要；
}

您的示例是错误的-您有一个

.buttons容器

，其中包含

溢出：隐藏

，但该类在示例中没有使用。如果您将

溢出：隐藏
放在
.container
-类上，我想它会按预期工作？当我在阅读问题后查看它时，小提琴不清楚。。。你能检查一下吗？对不起，我留了一些本不该在那里的课<代码>溢出：在
div
的
style
属性中声明了隐藏的
问题。来自@mohsen newtoa和@patryk-Łucka的两个答案都解决了这个问题。这里有更详细的解释，也许会有帮助：谢谢你的精彩解释。
<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;
}