Rems rendering differently between Chrome and Firefox

That happens most certainly because your browsers have different font-size settings, you can easily check it with this fork of your codepen.

alert(document.querySelector('.rem-test').scrollHeight);

If the alerted values are different in chrome and firefox you should definitely check your font-size settings.

Had the exact same "issue". In my case it had to do with the Windows 10 enlarged font and item size.

Firefox takes this into account en shows everything 1.25 times enlarged when set to 125%. While chrome does not.

So 14px in Firefox becomes: 17.5px on the monitor and in chrome it stays at 14px.

In Chrome you can look at chrome://settings/appearance and verify the property "Font size", the recommended value is "Medium".

Personally, i had the value "Large" and css attributes like margin, padding, line-height, font-size looked quite different. All was solved setting "Font-Size" to "Medium"