Letting components of page scroll but not the whole page

Ionic Framework ionic-v3
1

I am trying to create a tablet application with Ionic 2 and having trouble making individual components scroll. As an example, I am creating a ion-list like the following code and want the user to have the ability to scroll through the list of items without having the whole page scroll (other columns shouldn’t scroll):

<div class="column">
    <ion-card class="status-card">
      <ion-list overflow-scroll="true">
        <ion-item *ngFor="let message of pairingmessages">
          <scroll-content>
            {{message}}
          </scroll-content>
        </ion-item>
      </ion-list>
    </ion-card>

But rather than the list scrolling as the list grows, the height of the list just grows until the list is longer than the page. If I enable scrolling for the page, I can then scroll the whole page to see the list however if I disable scrolling for the page (app as a whole) then I am unable to see or scroll to the bottom of the list.

I have set the max-height style of the card, list and column in an attempt to prevent the list from growing past the bonds of the page but nothing seems to works. It appears that Ionic 2 wants to scroll the whole page or nothing. Is that correct? If not does someone have an example of app that allows only the components to scrolls and not the whole page.

EDIT: Just as a FYI, I did try to wrap the card in an ion-scroll tag setting scrollY to true however when I do that nothing is displayed in the column. I have tried the ion-scroll several different ways and cannot seem to get it working.

Thanks

2

did you find any solution. I am facing this problem right now