Html 当我尝试自定义滚动条时，为什么内容会消失？

我正在尝试自定义滚动条。我将当前滚动条的

宽度设置为
0
，以便从我自己的滚动条开始，但当我将
div
的高度设置为
100%
时，我希望它能像滚动条一样工作，
.content
中的文本消失了，我陷入了这个问题

以下是我迄今为止尝试的代码


*{
填充：0；
保证金：0；
框大小：边框框；
颜色：#fff；
}
.集装箱{
宽度：20%；
身高：100%；
背景：cd5c；
}
.内容{
文本对齐：居中；
溢出y：滚动；
宽度：100%；
身高：100%；
}
.content:：-webkit滚动条{
宽度：0；
}
.滚动条{
位置：相对位置；
宽度：20px；
身高：100%；
背景：#2F4F4F；
}

如果你是一位杰出的领导者，你就应该为你的未来付出代价。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。
当内容显示为：block时，scollbar正在将内容推到一边

两种显示方式：分块显示；元素不会共享同一行，除非给定了
浮动
样式

使用绝对定位元素或使html结构不同来修复此问题。我建议使用两个顶级元素，一个包装内容，一个包装滚动条。使用
float
或另一个
display
样式设置，例如flex-to-fix。
没有理由在代码段中运行此选项，因为它会产生不同的结果。我们应该能够运行代码以查看结果，否则我们无法帮助您，并且您的实际代码没有问题