CSS -webkit-scrollbar 搭配flex时，滚动条按钮显示异常问题记录

现象

父容器通过-webkit-scrollbar 自定义滚动条样式

使用-webkit-scrollbar-button 自定义滚动条两端的按钮。

若容器设置了flex，则滚动条两端会显示两个滚动条按钮。

如图

::-webkit-scrollbar-button {
    width: 12px;
    height: 12px;
    border: 1px solid #000;
}

两端就出现两个按钮。

正常情况下为一个按钮。

 如何解决

1. 父容器不设置flex，若还想使用flex，可考虑在内层设置一个flex容器。
   但是position:sticky的元素就不好了

2. ::-webkit-scrollbar-button {
       width: 12px;
       height: 12px;
       border: 1px solid #000;
       display: flex; /*设置flex*/
   }