css overflow scroll bar appears even when there is nothing to scroll

Try overflow: auto; so Scroll occurs depending on whether it is required or not automatically.

Use overflow-x: auto or overflow-y: auto if you want to get automatic scroll bar for only one direction

Try

overflow: auto

The link you provided is really complicated. Here is everything explained, I think much better: CSS-Tricks

I think you are looking for overflow: auto.

Mozilla's Documentation on Overflow

The overflow CSS property is shorthand for the overflow-x and overflow-y properties, and specifies what to do when content is too large to fit in its block formatting context.

The options include clipping, showing scrollbars, or displaying the content flowing out of its container into the surrounding area.

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 like Firefox provide scrollbars if content overflows.