Scrollbars appearing in overflow container on one machine but not the other

Question

A couple of weeks ago, I looked at a web app I created on a different machine (Chrome on Ubuntu) for the first time, and looked in horror at the scrollbars that were appearing in all of my overflow containers. I made a mental note to fix it later, but since I couldn't see the issue when looking at the site on my usual machine, I quickly forgot. I was just looking at it on another machine that I use on occasion (Chrome on Mac), and the scrollbar chaos has returned. However, when viewing my web app on the machine I'm on right now, the scroll bars are behaving as expected. Below are images to demonstrate.

The first is a screenshot from my current machine, of a chat box with overflow: scroll:

Same chat box, same code, same browser, but on my other Mac:

Look at those ugly things. It's like my browser went back in time 10 years. Both machines have the same version of Chrome (58.0.3029.110 (64-bit)) but differing versions of Apple OS (working one is Sierra 10.12.4, the non-working one is El Capitan 10.11.5). Again, this scrollbar behavior was seen on an Ubuntu machine too. Note that scrollbars work as expected in Firefox on both machines.

EDIT

To demonstrate what is expected, here is an image of the vertical scrollbar that appears only when scrolling on the working machine:

Answer 1

Try using overflow:auto; instead of overflow:scroll;. It will fix the issue as it'll show or hide the scrollbar automatically based on content inside the parent!

Answer 2

I came across this post with a similar issue, and thought I'd mention that the difference between the two could be explained if you are using a mouse on your "other Mac", but not on the original machine.

But as stated elsewhere, overflow:auto; would be a solution.