It appears that the issue at hand is related to a problem with the line-height in combination with overflow: auto.
To demonstrate this, I have recreated your codepen with a slight modification where I have included a default line-height: 1. You can inspect the div element in your codepen to see that it inherits this default line-height: 1:
div {
font-size: 17px;
overflow: auto;
/* default line-height */
line-height: 1;
}
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget interdum urna, eget tristique tellus. Phasellus pharetra blandit nisl, non venenatis arcu efficitur nec. Nulla facilisi. Ut at ante quis risus posuere varius. Aenean fringilla dui non sem hendrerit volutpat. Pellentesque mattis libero at volutpat malesuada. Aliquam in lobortis orci, vel condimentum tellus. Ut dignissim ligula sed nulla blandit vestibulum. Cras eleifend, orci eget rhoncus faucibus, massa lacus accumsan mauris, eget efficitur mauris est non nisl. Morbi vel nulla a urna pretium varius.
</div>
If you adjust the line-height to be appropriate for the 17px text, the scrolling issue should resolve. For example:
div {
font-size: 17px;
overflow: auto;
line-height: 20px;
}
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget interdum urna, eget tristique tellus. Phasellus pharetra blandit nisl, non venenatis arcu efficitur nec. Nulla facilisi. Ut at ante quis risus posuere varius. Aenean fringilla dui non sem hendrerit volutpat. Pellentesque mattis libero at volutpat malesuada. Aliquam in lobortis orci, vel condimentum tellus. Ut dignissim ligula sed nulla blandit vestibulum. Cras eleifend, orci eget rhoncus faucibus, massa lacus accumsan mauris, eget efficitur mauris est non nisl. Morbi vel nulla a urna pretium varius.
</div>
In essence, if the line-height is less than or equal to the font-size, and overflow is set to auto, the scrolling bug will present itself. Removing the overflow property while still keeping the line-height less than or equal to the font-size should eliminate the scrolling issue.
This is how overflow: auto behaves as stated by MDN:
auto
Depends on the user agent. If content fits inside the padding box, it looks the same as visible, but still establishes a new block formatting context. Desktop browsers provide scrollbars if content overflows.
When using the overflow property in this manner, the scrollbar appears when the line-height clips the font size.