Horizontal scroll inside slide-box


#1

Hi,

I have horizontal scroll inside a a slide box like this:

<ion-slide-box style="height: 400px;" active-slide="myActiveSlide">
  <ion-slide>
    <div class="box blue"><h1>BLUE</h1></div>
        <ion-scroll direction="x" class="wide-as-needed" >
            <div class="divs-in-line workout-stats" ng-mousedown="test()" ng-click="test()">
               <div>
                   Word 2
               </div>
               <div>
                   Word 3
               </div>
               <div>
                   Word 4
               </div>
               <div>
                   Word 5
               </div>
           </div>
     </ion-scroll>
  </ion-slide>
  <ion-slide>
    <div class="box yellow"><h1>YELLOW</h1></div>
  </ion-slide>
  <ion-slide>
    <div class="box pink"><h1>PINK</h1></div>
  </ion-slide>
</ion-slide-box>

Problem is that the slide box has highest priority when dragging horizontally and therefore the scroll is never activated. How can I make the scroll higher priority? I have tried bringing it in front with z-index, but no luck.

example: https://codepen.io/texton/pen/mzQWVW