Flexbox + overflow: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不接受unitlessflex-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;
}

Flexbox + overflow:hiddden 仅适用于 Chrome

Flexbox + overflow:hiddden works only in Chrome

html

css

overflow

flexbox