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

Question

此处有Fiddle显示问题。

基本上，我在div里面有一个div。两者都需要滚动，但需要水平滚动（外部滚动），另一个需要垂直滚动（内部滚动）。在PC上运行良好，但在移动浏览器（已检查的Android和移动Chrome浏览器）上，我只能水平滚动（滑动），而不是垂直滚动。

任何线索？代码如下：

HTML：

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

CSS：

.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;
}