Unable to change height of scrollbar thumb

Question

I am working on the following code. Why am I not able to set the height of scrollbar-thumb to height: 10px;?

I am able to change the width, color, .. of it and also modify all other content but not the height of thumb.

.box::-webkit-scrollbar {
  width: 12px;
  background-color: transparent;
  border: 0px solid transparent;
}

.box::-webkit-scrollbar-track {
  background: #f6f6f6;
  border-radius: 6px;
  border: 0px solid transparent;
  background-clip: content-box;
}

.box::-webkit-scrollbar-thumb {
  height: 10px;
  border-radius: 6px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: #555;
}