Custom scrollbar CSS is not working for div

Question

I am developing extension for Chrome and I made custom scrollbar. But I want to apply a different design inside the element named "#details". But it doesn't work. It only works for the whole page. Can you help me?

This is working...

::-webkit-scrollbar{
height: 12px;
width: 12px;
}

::-webkit-scrollbar-track{
background: rgba(255, 255, 255, 0.2);
border-radius: 1ex;
}

::-webkit-scrollbar-thumb{
background: var(--theme-color);
border-radius: 1ex;
}

But this is not working, Why?

#details::-webkit-scrollbar{
height: 12px;
width: 12px;
}

#details::-webkit-scrollbar-track{
background: rgba(255, 255, 255, 0.2);
border-radius: 1ex;
}

#details::-webkit-scrollbar-thumb{
background: var(--theme-color);
border-radius: 1ex;
border: 1px solid white;
}