How do you make a horizontal scroll that stays within a grid bound?

Ionic Framework ionic-v3
1

Hi all, I have a 67/33 grid and I want to have the 67 column have scrollable cards (couple of rows). But my scrollable content is taking president over everything and lists across the page instead being bound inside the 67 column.

Basically I would like section A to scroll horizontally but not overlap B:

= = = = = = = = = = = = = | *******
= = = = = = = = = = = = = | *******
= = = = = = A = = = = = = | *B
= = = = = = = = = = = = = | *******
= = = = = = = = = = = = = | *******

My Code:
< ion-content padding>
< ion-grid>
< ion-row>
< ion-col>
< scroll-content>
< ion-row>< ion-col> Item 1< /ion-col>< ion-col> Item 2< /ion-col>< ion-col> Item 3< /ion-col>
< ion-row>< ion-col> Item 1< /ion-col>< ion-col> Item 2< /ion-col>< ion-col> Item 3< /ion-col>
< ion-row>< ion-col> Item 1< /ion-col>< ion-col> Item 2< /ion-col>< ion-col> Item 3< /ion-col>< /ion-scroll>
< /scroll-content>
< /ion-col>
< ion-col width-33>
< p>HERE< /p>
< /ion-col>
< /ion-row>
< /ion-grid>
< /ion-content>

2

Well, I found the problem, I need to remove scroll-content. It works fine after that.