Mobile browsers horizontal scrollable inside vertical scrollable

问题

Here's a Fiddle showing the issue.

Basically, I have a div inside a div. Both need scrolling, but one needs horizontal scrolling (the outer one), the other one needs vertical scrolling (the inner one). On a PC this works fine, but on mobile browsers (checked stock Android and mobile Chrome), I can only scroll (slide) horizontally, but not vertically.

Any clues? Code below:

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

来源：https://stackoverflow.com/questions/24787960/mobile-browsers-horizontal-scrollable-inside-vertical-scrollable