Microsoft Edge处理视口高度与其他浏览器不同

Question

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

我在Chrome和Edge之间看到了上述问题。

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

在Edge，不是那么多。页脚将显示在页面底部。高度被认为是一直到底部，而不是切割到视口高度。

似乎视口是责备，但我找不到任何已知问题的参考。

  height: 100vh;
  width: 100vw;

关于修复的任何想法？

谢谢！

Answer 1

所以，发现这个博客：https://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/

来到这个解决方案： https://jsfiddle.net/7r9v0xqn/

键是最小高度：主div下面的0。

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