Flexbox + 溢出：隐藏仅在 Chrome 中有效答案

【问题标题】：Flexbox + overflow:hiddden works only in ChromeFlexbox + 溢出：隐藏仅在 Chrome 中有效
【发布时间】：2016-11-23 00:40:12
【问题描述】：

除了 Chrome 浏览器之外，我的左侧边栏内容不尊重 overflow:hidden 时遇到问题。在 Firefox 中，IE 和 Edge 侧边栏被扩展，而不是被限制为 300 像素的 .container div。有谁知道如何解决此问题？

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

【问题讨论】：

您的示例是错误的 - 您有一个包含 overflow: hidden 的 .buttons-container，但该示例中没有使用该类。如果您将overflow: hidden 放在.container 类上，我认为它会按预期工作？
看了这个问题后我看的时候小提琴不是很清楚......你能检查一下吗？
对不起，我留下了一些不应该在那里的课程。 overflow:hidden 我在div 的style 属性中声明了问题。 @mohsen-newtoa 和 @patryk-Łucka 的两个答案都解决了这个问题。

标签： html css flexbox overflow

【解决方案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 上测试它时看起来还不错）。如果没有，请考虑一下我写的内容，并在其他课程中进行类似的更改。我希望它会有所帮助！

【讨论】：

这里解释得比较详细，也许对你有帮助：philipwalton.com/articles/…
感谢您的精彩解释。

【解决方案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;
}

【讨论】：