html - オーバーフロー x を使用した div 内のオーバーフロー y を使用した複数の div

Question

水平方向と垂直方向の両方にスクロールできる Web アプリケーションを作成しています。これは、次の HTML で行いました。

<div class='main-scroll'>
    <div class='main-content'>
        <div id='sub1' class='sub-scroll'>
            <div class='content'>
            </div>
        </div>
        <div id='sub2' class='sub-scroll'>
            <div class='content'>
            </div>
        </div>
    </div>
</div>

そして、次の CSS:

body {
    -webkit-overflow-scrolling: touch;
}

.main-scroll {
    height: 300px;
    width: 600px;
    background-color: #ff0000;
    overflow-x: auto;
}

.main-content {
    height: 100%;
    width: 1000px;
    background-color: #ff0000;
}

.sub-scroll {
    height: 100%;
    width: 450px;
    background-color: #00ff00;
    position: relative;
    float: left;
    overflow-y: auto;
}

#sub1 {
    top: 0px;
    left: 0px;
}

#sub2 {
    top: 0px;
    left: 50px;
}

.content {
    width: 100%;
    height: 600px;
    position: relative;
    background: #1e5799; /* Old browsers */
    background: -moz-linear-gradient(top,  #1e5799 0%, #e079de 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#e079de)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #1e5799 0%,#e079de 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #1e5799 0%,#e079de 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #1e5799 0%,#e079de 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #1e5799 0%,#e079de 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#e079de',GradientType=0 ); /* IE6-9 */

}

解決策は、この JSFiddle http://jsfiddle.net/vevfknct/3/にもあります。

デスクトップ、iOS、android 用の firefox などで正常に動作します。問題は、android 用の chrome が、垂直にスクロールできる div で水平方向にスクロールすることをブロックすることです。スクロール可能な div 間のスペースでのみスクロールできます。クロムの解決策を持っている人はいますか?