Can I color the cross section when customizing the scrollbar?

When customizing the scrollbars of an element, I end up with this negative space in the bottom right corner whose dimensions are equal to the width and height of the scrollbars. I can't figure out how to set a background color for it.

Here's a pen that depicts the problem

<div class='container'>
  <div class='content'>
  </div>
</div>

.container{
  border: solid red 10px;
  height: 300px;
  width: 200px;
  overflow: auto;
  &::-webkit-scrollbar{
    width: 5px;
    height: 5px;
    background: black;
  }
  &::-webkit-scrollbar-thumb{
    background: white;
    border-radius:10px;
  }
  &::-webkit-scrollbar-track{
    background: darkred;
  }
}
.content{
  background: darkred;
  height:500px;
  width: 500px;
}