Customizing ::-webkit-scrollbar breaks previous functionality?

I wanted to customize the scrollbar for Chrome browser.
By default, as today, Chrome hides the scrollbar. When the user starts scrolling, the scrollbar appears and when the user finishes scrolling the scrollbar disappears. I want to keep this functionality and just apply some custom css to the scrollbar. Right now I only did this:

::-webkit-scrollbar {
  width: 15px;
  overflow-x: auto;
  background: #d71212;
}

::-webkit-scrollbar-thumb {
  width: 15px;
  overflow-x: auto;
  background: #32ba49;
}

But all the previous functionality is not working anymore. The 2 key differences are:

1. The scrollbar is always visible
2. The scrollbar occupies space (it is not on top of/ "overlayed above" the scrollable content)

How can I also customize these 2 options ?

[EDIT]
Add link: https://jsfiddle.net/butwhy/Lk3qy10a/6/