How to make ScrollFrame resize to children

I want to create my own PlayerList Gui and I have all of the UI completed, though I want all of the contents to move depending on how many players in a team.
image

In the image above, there are about 4 players in the first team, but the player text overlaps the teams below, how could I make it so the teams below move down to show every player.
Same with the size of the ScrollingFrame to change size depending on how many teams are visible.

Have you looked into UI lists? I bet you can have a UI list for the teams then a UI list inside each team.

There is a UIListLayout inside the ScrollingFrame. And also one inside the frame with the players.

could we see the explorer, to see how everything is parented?

Here you go.
image

Okay so that’s the problem you see, the size of “Army Special Operations Command” frame stays the same, so you either change size of it manualy by script, or use AutomaticSize.

Either way, you’re gonna have to use the offset for the size, if you aren’t already.

The team frame is sized like this, {1, 0},{0, 50}

okay then you can use the AutomaticSize. With out any problem!

Do I only use AutomaticSize for the main team frame? And do I set it to Y

Use it for both, and yes you should set it to Y

Both as in the ScrollingFrame and team frame?

Collect! Other wise it won’t work.

Wait no, Use to the “Army Special Operations Command” frame and the frame for each player frame

They still overlap over the teams
image

oh wait right! not the each Player frame, the “List” frame! I’m so sorry

They going up now, theres 4 of them and only 2 are showing
image

okay I got it to work in my place, so what you wanna do is set the TopBar’s Y anchor point to 0.
and set position right from there.

Wdym by the TopBar? Are you refering to the team frame?

I meant the Display frame in the “Army Special Operations Command”

The Display frame anchor point is 0?