道理我不懂，为什么这个滚动条这么细？

分别滚动左边的.outer 的内容，及整个 body 的内容， .outer 这个滚动条为什么在移动浏览器上（ chrome 、safari 、firefox 都一样）只有 1 个像素宽，几乎看不清。而 body 这个滚动条就很粗呢？

简直离谱😿一定是我哪里搞错了，因为我的 app 里同样的 absolute 定位的内容块滚动条就不细，app 代码太多一下子搞不明白，所以偷懒问一下谁知道原因？

在线地址: https://pubcn.oxyry.com/sw.html

<style>
.outer {
  position: absolute;
  background: #ffa;
  left: 0;
  top: 0;
  height: 200vh;
  width: 50vw;
  overflow: auto;
  overscroll-behavior: none;
}
.inner {
  height: 4000px;
  font-size: 300px;
  overflow: hidden;
}
</style>

<div class="outer">
  <div class="inner">
    The quick brown fox jumps over the lazy dog
  </div>
</div>