html - Microsoft Edge 处理视口(viewport)高度的方式与其他浏览器不同

Question

JSFiddle:https://jsfiddle.net/b6L6j037/

我在 Chrome 和 Edge 之间发现了上述问题。

在 Chrome 中，一切都很棒，按预期工作。请注意，页脚始终显示，并且左侧 div 不滚动。

在 Edge 中，情况并非如此。页脚位于页面底部。高度被认为是一直到底部，而不是剪切到视口(viewport)高度。

看起来视口(viewport)是罪魁祸首，但我找不到任何已知问题的引用。

  height: 100vh;
  width: 100vw;

有什么修复的想法吗？

谢谢!

Answer 1

所以，找到了这个博客:https://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/

并得出了这个解决方案: https://jsfiddle.net/7r9v0xqn/

关键是主 div 下的 min-height: 0。

.main {
  display:flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex: 1 1 auto;
  min-height: 0;
}