How do I increase the size of a scrolling frame as the GridLayout gets larger?

So I have a scrollingFrame called Cards and I want to insert frame into cards. Inside the scrollingFrame Cards there is a UIGridLayout.

I want the scrollingFrame to increase as my UIGridLayout increases. So I looked this up and found the code on the Roblox Development Page.

When I run the code without wait(1) it spasms and starts moving the scrolling frame frantically over and over again until it increases infinitely.

When I run the code with wait(1) it works fine but spaces out the frames inside the scrolling frame way too much. So instead of having them at the distances I set them, the padding in the UIGridLayout increases as the scrolling frame increases.

Here's my code:

local scroll = false
local card = false
wait(0.5)
local player = game.Players.LocalPlayer
local char = player.Character

function LoadCardList()
	local count = 0
	local cards = player.Cards:GetChildren()

	for i, v in pairs(cards) do
		local cf = script.Parent.Frame:clone()
		cf.Visible = true
		cf.Parent = script.Parent.PDA.Cards
		cf.Image = v.Texture
		cf.Position = UDim2.new(0,0,count/5,0)
		local c = cf
		local gr = v

		cf.Delete.MouseButton1Down:connect(function()
			pcall(function() v:Remove() end)
				ClearCardList()
				LoadCardList()
		end)
		count = count + 1
	end
end

function ClearCardList()
	for i, v in pairs(script.Parent.Cards:GetChildren()) do
		v:Remove()
	end
end

LoadCardList()

local function onContentSizeChanged()
	wait(1)
	local absoluteSize = script.Parent.PDA.Cards.UIGridLayout.AbsoluteContentSize
	script.Parent.PDA.Cards.CanvasSize = UDim2.new(0, absoluteSize.X, 0, absoluteSize.Y)
end
 
script.Parent.PDA.Cards.UIGridLayout:GetPropertyChangedSignal("AbsoluteContentSize"):Connect(onContentSizeChanged)