Scrolling vertically does not work when there are horizontal scroll panes

1

Hi, I am working a ion-list in which each item is a horizontal pane. The horizontal scroll-pane works fine but the vertical scroll pane does not work.

   <ion-content>
    <ion-refresher pulling-text=".." on-refresh="doRefresh()"></ion-refresher>

    <div class="list">
        <div class="item" style="padding: 8px;">
            <h2>
                recommendations
                <span style="float:right">
                    <i class="icon ion-ios-arrow-right positive" ></i>
                </span>
            </h2>
            <ion-scroll direction="x" class="summary-list">
                <div ng-repeat="top in topa" class="summary-list-item">
                    <img image-lazy-src="{{top.cover}}">
                    <div>{{top.name}}</div>
                </div>
            </ion-scroll>
        </div>
        <div class="item" style="padding: 8px;">
            <h2>
                recommendations
                <span style="float:right">
                    <i class="icon ion-ios-arrow-right positive" ></i>
                </span>
            </h2>
            <ion-scroll direction="x" class="summary-list">
                <div ng-repeat="top in topa" class="summary-list-item">
                    <img image-lazy-src="{{top.cover}}">
                    <div>{{top.name}}</div>
                </div>
            </ion-scroll>
        </div>
    </div>
</ion-content>