css设置overflow:auto 移动端滚动条无法自动隐藏？

Question

<div id='f' style='background:red;height:300px;width:100%;overflow:hidden;border-radius: 10px;'>
    <div id='b' style='background:red;height:100%;width:100%;overflow:auto'>
      <div id='c' style='background:rgb(188, 193, 194);height:100%;width:300%;'>
        111111111111111111111111111111111111111111111111111111111111111111111111111
      </div>
    </div>
  </div>

如上述代码，在移动端中，滚动条会在滚动第一次后自动消失（正常情况），但是第二次去滚动之后一直保留在页面上而不像第一次那样隐藏（异常情况）。
当去掉外面div的border-radius的属性之后就会变回正常，能够在任何时候滚动结束后自动隐藏。
有没有大神知道这种情况要怎么解决，知道是什么原因导致的吗？

Answer 1

id 为f的overflow去掉, id为b添加一个与f相同的border-radius
内层的b设置了overflow, 外层就需要设置了, 如果f里面又要放东西又要不显示那就用display: none

  <div id='f' style='background:red;height:300px;width:100%;border-radius: 10px;'>
    <div id='b' style='background:red;height:100%;width:100%;overflow:auto'>
      <div id='c' style='background:rgb(188, 193, 194);height:100%;width:300%;'>
        111111111111111111111111111111111111111111111111111111111111111111111111111
      </div>
    </div>
  </div>

Answer 2

看你的描述你可能是想实现这样的效果？

<div id='f' style='background:red;height:300px;width:100%;overflow:hidden;border-radius:10px;'>
  <div id='b' style='background:red;height:100%; width:100%;overflow:scorll;padding:0 20px 20px 0'>
    <div id='c' style='background:rgb(188, 193, 194);height:100%;width:300%;'>
      111111111111111111111111111111111111111111111111111111111111111111111111111
    </div>
  </div>
</div>