Scrollbar from hell

Hello,

So I've doing an exercise where I mimic the champion select from the game League of Legends to work with UI elements. I've implemented a scroll bar so I can list all 145 (or however many depending on search results) champions in a Scroll area, then the player can scroll through the list and look at the icons which are buttons on a layout group. The problem is, that my ScrollbarContent and Scrollbar position start at opposite ends. So if my scrollbar content starts at the top of the table, then the scrollbar itself is at the bottom. Vice versa too.

Attempted solutions:
-Changed the pivots so that they have Y values 0 and 1 accordingly and readded all the test buttons to make sure they were added using the pivots.
-changed the scrollbar sensitivity to negative, changed the scrollball value pre and post runtime, but it just moves the content to match
-rotated the scrollbar along each axis to try and at least make it look normal, but usually it just kinda breaks everything
-Wrote a script to manually reset the scrollbar position on start but that just moved the content again
-Deleted the scrollbar, realigned the button, and readded the scrollbar but it automatically shifted its value to 1 for Top to Bottom, and 0 for Bottom to top

I've read every post I can find, can someone please help me I feel Jack from the shining.