html - Flexbox + 溢出 :hiddden works only in Chrome

Question

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

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不接受unitless flex-basis。这就是为什么您必须使用 flex: 1 1 0% 或 flex: 1 1 0px 而不是 flex: 1 1 0 的原因。 flex: 1 1 auto 在这种情况下也不起作用。

第二个问题是 Chrome 和 Firefox 对 display: flex 的不同解释。 Firefox 默认设置 min-height: auto; min-width: auto; 在 display: flex 元素上，Chrome 将其设置为 min-height: 0;最小宽度:0。而您需要的是第二种选择。

我不确定这个简单的更改是否能解决您的所有问题(但当我在 IE 和 Firefox 上测试它时看起来没问题)。如果没有，请想想我写的，在其他类中做类似的修改。希望对您有所帮助!