Today I Learned

Fix for margin hell that affects your app container

Your app container has:

max-height: 100vh;

But your page still have a scroll

Whenever you hover over <body> you will see that it’s slightly off the top of the page. Suprisingly it has also margin: 0; The problem is that the children of your app container have some margins and it’s too much work the get rid all of them.

To fix the issue add to your app container:

display: flow-root;

grid/table/flex also works but only the flow-root keeps the block behaviour.

NOTE It doesn’t work on IE and some other browsers you don’t care about :)

Test it out: Link