html - Microsoft Edge handling viewport height differently than other browsers -

jsfiddle: https://jsfiddle.net/b6l6j037/

i'm seeing issue above, between chrome , edge.

in chrome, great, works expected. notice footer shown, , left div doesn't scroll.

in edge, not much. footer goes bottom of page. height considered way bottom, not cut viewport height.

it seems viewport blame, couldn't find references known issues.

  height: 100vh;   width: 100vw; 

any ideas on fix?

thanks!

so, found blog: https://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/

and came solution: https://jsfiddle.net/7r9v0xqn/

key being min-height: 0 under main div.

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