Weird `mix-blend-mode` Behaviour, Changing When Parent's Height Is Set To `100vh`

Question

I noticed some weird mix-blend-mode behaviour, see here:

body {
  background: blue;
}
main {
  width: 2rem;
  height: 10rem;
  background: blue;
}
div {
  position: absolute;
  width: 5rem;
  height: 5rem;
  mix-blend-mode: screen;
}
div:nth-child(1) {
  background: red;
}
div:nth-child(2) {
  top: 2rem;
  background: green;
}

<main>
<div></div>
<div></div>
</main>

Now the divs don't blend with the body, only with each other and with main. But when I set the height of main to 100vh, suddenly the divs blend with the body. Is this a bug in Chrome? Here is how it looks in my browser with the code above:

And here with height: 100vh (note that the width is unchanged):

Even when the main has no background at all its height changes the mix-blend-mode between the div and the body!

Anyway, I'd like to have divs in some container so they only blend with each other, not with the container background. Is this possibly, across browsers?

Answer 1

This is the difference that occurs depending on whether or not "background: blue" is applied to the wrapper(ex. body) of the main.