Multiple divs with overflow-y within a div with overflow-x

Question

We are creating a web application that is able to scroll both horizontally as vertically. We did this with the following piece of 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>

And the following 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 */

}

The solution can also be found in this JSFiddle http://jsfiddle.net/vevfknct/3/

It works fine on desktops, iOS, firefox for android, etc. The problem is that chrome for android blocks scrolling horizontally on a div that can scroll vertically. It is only able to scroll on the space between scrollable divs. Is there anyone with a solution for chrome?