Footer with flexbox?

Question

css

Hello! Tell me, who can, what is the problem. I made the footer stick to the bottom of the page using flexbox:

body{
  display: flex;
  height: 100vh;
  flex-direction: column;
}
.layout {
  width: 100%;
  flex: 1 0 auto;
}
footer{
  width: 100%;
  height: 150px;
}

In the markup, respectively, the layout and footer are located next to each other. If the layout is empty or no height is specified for it, then the footer stands still, pressed to the bottom of the page. But as soon as you add content, the footer (the block itself, with the background and others) goes down outside the viewport, and all the contents of the footer remain in place.
Upd. When zoomed out to 50% or less, the footer appears in place.

Answer 1

I found a mistake - in the body you need to specify min-height: 100vh instead of height
And a new question - how to make it work in IE? :)
In it, flexboxes conflict with min-height...
Maybe someone knows?