Scrollable area within another scrollable area

So I am trying to use ionic to create an ipad app, and one of the things I want it to do is scroll on the x axis (which I made work easily, thanks to the docs), but also, within certain items that are in within the side scroll area, be able to scroll vertically. I also did the second one, but… it doesnt work as expected.

Codepen is here:

The first card isnt setup to scroll, but the second one is. If you try to scroll in it, it works, but the text doesnt hide behind the card header as you scroll, and the scroll height is all messed up. Since I am not sure what the height every device will have using is (targeting ipad, ipad mini, and most android tablets), I cant hard code a pixel height (hard coding one DOES fix the scroll height, but the text still lays over the card header), so I am not sure how to make that work.

Any help is much appreciated!