Differences with padding on scroll between Chrome and Firefox

Question

First, I'd like to say I read this answer, but it looks like a different problem.

Mine is that the scrollable element has CSS declaration like this: padding: 2.5rem 0;.

Chrome renders that properly. I scroll down and see that padding as "blank" space at the end, but the problem is with Firefox, where I scroll down and I can't see that "blank" area at the end.

Problem is solved if I add a margin-bottom: 2.5rem in FF, but it looks wrong (looks a big blank area at the bottom) in Chrome.

Here are images to explain it a bit better.

Firefox Screenshots

Chrome Screenshots

Here is a pen to see it in action: https://codepen.io/sebazelonka/full/PooLvgW

Thanks!

Answer 1

After I submitted the question, I found this one: Flexbox padding bottom fails in Firefox and Safari

Is not completely explained why is that happening, but the answer works fine and solves the problem.