Html 移动浏览器水平滚动内部垂直滚动

下面是一个显示问题的示例

基本上，我在一个div中有一个div。两者都需要滚动，但一个需要水平滚动（外部），另一个需要垂直滚动（内部）。在个人电脑上这很好，但在移动浏览器（Android和移动Chrome）上，我只能水平滚动（滑动），不能垂直滚动

有什么线索吗？代码如下：

HTML:

<div class="outer">
    <div class="firstContainer">
        <div class="secondContainer">
        </div>
    </div>
</div>

.outer {
    width: 320px;
    height: 480px;
    overflow: auto;
}

.firstContainer {
    width: 100%;
    height: 130%;
    background: #808080;
    overflow: auto;
}

.secondContainer {
    height: 80%;
    width: 130%;
    background: #d0d0d0;
    border: 15px solid black;
}

---

在Safari上，有时需要使用两个手指在元素内滚动。一种解决方法是使用iScroll之类的库：