::-webkit-scrollbar-thumb is not working with a page height of 100 percentage. Can anyone help me out?

Here I am trying to apply custom scrollbar and scrollbar-thumb to my webpage. Below is my code in Sass.

app-overview is an Angular component.

app-overview {
   font-family: 'Interstate-Regular', sans-serif;
    height: 100%;
    width: 100%;
    // height: 500px;
    overflow: scroll;
    overflow-x: hidden;
    // overflow-y: auto;

above is my app-overview css.

I am using this also

::-webkit-scrollbar{
    width: 0px;
} //it will remove scrollbar from the whole body. 

Here is my app-overview scrollbar code

app-overview::-webkit-scrollbar{
    width: 15px;
    background: rgb(142, 140, 140);
    // -webkit-appearance: none;
}

Above code are working fine. But the problem is scrollbar-thumb is not working.

app-overview::-webkit-scrollbar-thumb{
    background-color: #ccd1d4;
    -webkit-appearance: none;
    // height: 50px;
}

//I've tried height also, but not working. 

Anyone have any solutions? Thanks in advance!

I've tried all possible ways to make the scrollbar-thumb visible, but not getting the scrollbar-thumb