How can I fix this 100% height problem on Firefox

Ketting00,

100% high canvas plus the height of the anchor exceeds 100%; thus, the scrollbar.
EDIT: I’m not so sure that my ‘diagnosis’ is correct. Canvas is a ‘special’ container and I’ve not used it before. I do not think its dimensions are quite so obvious.

If you need help with a redesign, then please explain why flexbox on the body. It doesn’t seen to serve a purpose. Couldn’t you do this with a sticky footer layout?

Take a looks at Paul’s sticky footer example posted here:
DIV with child DIVs and how to manage the height/width - #11 by ronpat

Paul’s layout permits any height header or title at the top of the page plus anything that you wish to put in the body. If the content is greater than the available height, the page scrolls… The sticky footer is not required if you do not want to use it.