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

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?