Unexpected scroll bars with calculated height accounting for margin - css

Question

I have the following CSS and HTML
body {
margin:0px
}
.outer {
height: 100vh;
}
.inner {
height: calc(100vh - 20px);
margin: 20px;
}
<div class="outer">
<div class="inner">
</div>
</div>
This results in scroll bars.
If I remove the 'outer' class, everything works as expected - no scroll bars.
Obviously, the outer class is redundant, however, I want to know why the scroll bars appear
Any ideas?

Answer 1

This is because browsers define a default margin for the body.
Your outer starts lower and to the right by about 10px (the default margin), and then extends its size equal to the size of the viewport by creating the scroll bars.
When the default margin is reset, the scroll bars disappear.
body, html {
margin: 0px;
}
.outer {
height: 100vh;
background-color: green;
}
.inner {
position: absolute;
width: calc(100vw - 40px);
height: calc(100vh - 40px);
margin: 20px;
background-color: yellow;
}
<div class="outer">
<div class="inner">
</div>
</div>
UPDATE
In my first answer I had copied your code including an error (margin 20px on the .inner class) that did not allow me to see this further "problem", however the first answer remains valid, even if partial.
This second problem in my opinion is due to the "margin collapse". Here is a paragraph (of this MDN doc) that I believe is your case:
These rules apply even to margins that are zero, so the margin of a
descendant ends up outside its parent (according to the rules above)
whether or not the parent's margin is zero.
If you inspect with the browser developer tools (maybe with colors it is easier than with both white boxes) you will realize that the margin of .inner comes out of his parent .outer.
You can find the solution in the MDN guide, in my case I set position: absolute to .inner class, but you can find the same answers here: SO Answer
And last thing margin: 20px applies 40px of margin per height (20px top and 20px bottom) and 40px width, so your calc should be height: calc(100vh - 40px);.
Code updated above