无法更改滚动条拇指的高度

Question

我正在处理以下代码。为什么我无法将滚动条的高度设置为height: 10px;？

我可以更改其宽度，颜色等，还可以修改所有其他内容，但不能修改拇指的高度。

.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;
}