マイクロソフトのエッジが異なり、他のブラウザ

Question

JSFiddleよりも、ビューポートの高さを扱う：https://jsfiddle.net/b6L6j037/

を私はChromeとエッジの間で、上記の問題を見ています。

Chromeでは、すべてが素晴らしいです、期待どおりに動作します。フッターは常に表示され、左のdivはスクロールしません。

エッジではあまりありません。フッターはページの一番下に移動します。高さは、ビューポートの高さにカットされるのではなく、ボトムまでとみなされます。

ビューポートは非​​難されているようですが、既知の問題の参照が見つかりませんでした。

height: 100vh; 
    width: 100vw; 

修正に関するアイデアはありますか？

ありがとうございます！

Answer 1

だから、このブログが見つかりました：https://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/

を、この溶液に来た： https://jsfiddle.net/7r9v0xqn/

キーであることのmin-height：0メインのdivの下で。

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