Weird overflow

I'm confused: why is there an overflow and the scrollbar is displayed? The container only has a height of 20% and the margin is 2rem, which is way below the viewport height, right? https://jsfiddle.net/KonerDev/u8jb3fmk/4/ In the devtools it looks like the body has been shifted down by 2rem. I'd like to understand what's causing this problem? If I set the 2rem as padding on the body, everything works as intended.

Edit fiddle - JSFiddle - Code Playground

JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.