how to make an ionic list scrollable?

Question

im trying to make an ionic-list scrollable by adding ion-scroll but instead of the the ion-list being scrollable the entire page becomes scrollable. how do i make just the ionic-list scrollable? here's my code:

<ion-view title="Omnipay - Welcome" id="page5">
<ion-content padding="true" class="has-header">
 <div>
  <img src="img/omnipay_logo.jpg" style="display: block; width: 100%; height: auto; margin-left: auto; margin-right: auto;">
</div>
<h3 id="omnipayWelcome2-heading13" style="color:#000000;">My Info:</h3>
<h4 id="omnipayWelcome2-heading15" style="color:#000000;">Balance:</h4>
<h4 id="omnipayWelcome2-heading14" style="color:#000000;">Transaction History</h4>
 <ion-scroll direction="xy" >
        <ion-list can-swipe="listCanSwipe">
        <ion-item ng-repeat="item in data1">
            Date: {{item.date}}<br>Transaction: {{item.transaction}}<br>Merchant: {{item.merchant}}<br>Amount: {{item.amount}} 
        </ion-item>
        </ion-list>
</ion-scroll>
<a ui-sref="menu.mainMenu" id="transactionHistory-button1" class="button button-positive  button-block">Back</a>
<button class="button button-positive  button-block" ng-click="refreshPage()">Refresh</button>
</ion-content>
</ion-view>

Answer 1

Give your <ion-scroll> directive a height attribute: Eg.

CodePen Demo / CodePen Full Page (Best seen on mobile view of the browser)

<ion-scroll style="height: 200px">
  <ion-list>
     <ion-item ng-repeat="item in items">{{item}}</ion-item>
  </ion-list>
</ion-scroll>

Answer 2

ion-scroll doesn't exist anymore, div could be use instead

the above css could be actualized like the following

div[scrollx=true],div[scrolly=true] {
     position: relative;
     overflow: hidden;
}

div[scrollx=true] {
    overflow-x: auto;
}

div[scrolly=true] {
    overflow-y: auto;
}

<div scrolly="true" style="max-height:100px">
    <!--content to scroll whose height exceeds 100px-->
</div>

Answer 3

This worked for me:

<ion-content [scrollEvents]="true">
  <ion-list>
    ...
  </ion-list>
</ion-content>

https://ionicframework.com/docs/api/content