滚动内部div不会滚动外部div？

Question

我为移动设备设置了这样的页面：http://jsfiddle.net/Zhm69/1/

我希望能够在'scrollable-div'中左/右滚动'外包装'，但此刻没有任何反应（这很烦人，因为我的每个'内部div'基本上都是页面覆盖整个屏幕，所以我希望能够在页面之间滚动，即使在具有垂直滚动的页面上也是如此）

有没有办法可以做到这一点？可以是css / jquery / js解决方案。

这里的代码如果没有一些就不能发帖，但请看小提琴：

outer-wrapper{
float:left;
width:400px;
height:200px;
overflow-x:scroll;
overflow-y:hidden;
}

.inner-wrapper{
width:800px;
height:200px;
}

.inner-div{
float:left;
width:400px;
height:200px;
display:inline-block;
}

.scrollable-content{
width:200px;
height:200px;
overflow-x:hidden;
overflow-y:scroll;
}