How to create a scrolling menu that scales to all screen sizes

So the basic idea is to have a two page menu. one on top of the other so you can scroll between them as if they are one big image. So the end result is I want a menu that is twice as long as the phones screen so I can have specific content on the top and on the bottom, with the ability to scroll between them.
My way of doing this was to make the menu one scroll rect, set the panel height to twice the size of the screen and all my UI items on it in the proper place. This worked perfect when only working on one size screen. I want it to be responsive to all screen sizes and when that would happen everything would scale horribly wrong, since the aspect ratios are not all the same.
What I would really love to be able to do, is have two separate canvas scalers working independently on two different canvas’s that are on top of each other in a scroll rect, so the top and bottom content would never be on the screen at the same time.

I’m still relatively new but would you be able to use a canvas scaler component? Use that to scale with screen size?

Well I ended up sticking with something pretty simple. I was trying to make it work for any resolution and realized I needed to just stick to the few resolutions it will mostly be used on. ended up setting all anchors to stretch, only changing the scale and placing them on the scroll rect, and making my reference scale in the scaler the highest resolution I use. Thanks for the input @Nixmortem.