::-webkit-scrollbar伪元素来让滚动条自适应大小

`::-webkit-scrollbar`伪元素可以用来选择滚动条元素，并设置其样式，但是它不能让滚动条自适应大小。要让滚动条自适应大小，可以使用`::-webkit-scrollbar`伪元素的`width`属性和`height`属性来设置滚动条的宽度和高度。

具体步骤如下：

1. 首先，为滚动条元素设置一个基础样式，例如：

::-webkit-scrollbar {
  background-color: #f0f0f0;
  width: 10px;
  height: 10px;
}

在上面的样式中，我们将滚动条的背景颜色设置为灰色，宽度和高度都设置为10px。

2. 接着，可以使用CSS的`calc()`函数和`100%`单位来计算滚动条的宽度和高度，例如：

::-webkit-scrollbar {
  background-color: #f0f0f0;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
}

在上面的样式中，我们使用`calc()`函数计算滚动条的宽度和高度，减去了一个20px的边框宽度，这样就可以让滚动条自适应大小。

3. 最后，可以为滑块和轨道等滚动条的不同部位设置样式，例如：

::-webkit-scrollbar {
  background-color: #f0f0f0;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
}

::-webkit-scrollbar-thumb {
  background-color: #007bff;
}

::-webkit-scrollbar-track {
  background-color: #e9ecef;
}

在上面的样式中，我们为滑块设置了蓝色的背景颜色，为轨道设置了灰色的背景颜色。

需要注意的是，只有Chrome和Safari浏览器支持`::-webkit-scrollbar`伪元素。如果需要在其他浏览器中实现滚动条自适应大小，可以使用一些第三方库或者自定义滚动条的插件来实现。