html - Flexbox + 溢出 :hiddden works only in 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不接受无单位flex-basis 。这就是为什么你必须使用 flex: 1 1 0%或flex: 1 1 0px但不是flex: 1 1 0 。和flex: 1 1 auto在这种情况下也不起作用。

第二个问题是display: flex的不同解释在 Chrome 和 Firefox 中。 Firefox 默认设置 min-height: auto; min-width: auto;上display: flex elements 和 Chrome 将其设置为 min-height: 0; min-width: 0 。您需要的是第二个选项。

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