Scrolling Inventory - Question about scroll rects and UI

Hello everyone, I have a bit of problem attempting to figure out the best method to perform what I'm after and I hope someone may be able to help.

I have a panel in my game which I need to add inventory items into (Check picture) so that the player may be able to scroll up and down to select which item they want now my problem is how to do this.

I've thought about using a scroll rect with a image/mask then every time I add an item I will increase the content of the scroll rects height variable (Which is a panel) and place a new UI prefab onto that panel meaning the panel is only ever as big as the content.

Is this the right method? 2 panels, one with with a scroll rect/mask/image and other just actively updating its size as i add prefabs.

 

In order to make the scrollrect work you have to have a content inside that is bigger than the content rect.
What I usually do is something like this:

Code (CSharp):

1. - scrollrect ( scrollrect + mask )
2.   - content ( vertical layout group. uncheck width/height + content size fitter -> set the axis you want to expand to prefered size. )
3.      - child 1 ( layout element with height/width )
4.      - ...
5.      - child n

Check the images
Hope that helps.

 

I love you, I never knew about groups before