CODEWITHSUNDEEP
htmlcssviewport
Justin Warner
Justin Warner

Reputation: 879

Microsoft Edge handling viewport height differently than other browsers

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

I'm seeing an issue where the above, between Chrome and Edge.

In Chrome, everything is great, works as expected. Notice the Footer is always shown, and the left div doesn't scroll.

In Edge, not so much. The footer goes to the bottom of the page. The height is considered to be all the way to the bottom, not cut to the viewport height.

It seems the viewport is the blame, but I couldn't find any references to known issues.

  height: 100vh;
  width: 100vw;

Any ideas on a fix?

Thanks!

Upvotes: 2

Views: 4164

Answers (1)

Justin Warner
Justin Warner

Reputation: 879

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

And came to this solution: https://jsfiddle.net/7r9v0xqn/

Key being the min-height: 0 under the main div.

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

Upvotes: 2

Related Questions