Css 嵌套div大于父div

我正在使用CSS对使用JavaScript创建的滚动条进行蒙皮

。滚动条轨迹{
背景：黑色；
高度：10px；
}
.滚动条拇指{
游标：默认值；
边框：1px红色实心；
宽度：50px；
填充：0；
}
.首先是滚动条拇指{
显示：内联块；
背景：绿色；
宽度：5px；
高度：10px；
}
.滚动条拇指中间{
显示：内联块；
背景：红色；
高度：10px；
宽度：20px；
}
.滚动条拇指最后{
显示：内联块；
背景：蓝色；
宽度：5px；
高度：10px；
}

没有为.scrollbar div指定明确的宽度，因此它假定默认值为其父级给定宽度的100%

.scrollbar轨迹的显式宽度为970px，超出了父轨迹和父轨迹的宽度。因此，.scrollbar最终比它的宽子.scrollbar轨迹薄

为什么要显式设置滚动条轨迹，但不对.scrollbar（父项）执行相同的设置？
通过将所有
显示：内联块
更改为
浮动：左
解决了此问题

这个问题可能与有关，但删除所有空白并不能解决我的问题。这可能是因为节点是用javascript创建的。
这是一个简单的问题。默认情况下，跨距线高度为20px。内联块元素读取要垂直对齐的行高度

所以解决方案是

line-height: 10px; or float: left;

例如：

或

尝试将宽度设置为
.scrollbar track
和
.scrollbar
，但我仍然在拇指中得到不需要的填充（顶部和底部）。拇指片之间的空间是由于跨距之间的空间造成的。您需要删除所有文本空白，使跨距彼此相邻对齐，或者更改其显示属性。如果您试图将高度设置为小于线高度，那么最好将线高度与高度一起显式设置。还有一个
溢出：隐藏在这些特殊情况下可能会有所帮助。看看这个：你能不能使用
显示：block
和
浮动：left
；
显示：内联块
似乎有问题。此外，边框占据2倍的顶部和底部，因此需要将高度设置为8倍。
.scrollbar-thumb span{
   line-height: 10px;
}

.scrollbar-thumb span{
   float: left;
}