Automatic canvas size issue

For my scrolling frame, I want it to automatically resize the canvas to fit its content. however, this is what happens. What is showing is a before and after picture.



As you see in the before picture, there is a little space for more content, but when I overfill it, then the entire thing resizes and it becomes the after image you see, for some reason now its clipping everything. This is another image but this time its showing all of the things I use in explorer:

To simplify what it is, there is a scrolling frame, and inside, there is 2 folders, 1 is backings and one is the folder where actual pets will be shown. All of the content sizes, position, etc is determined by a UI grid layout constraint. Another thing to know is that I automatically convert the scale size of the content to offset using some code as scale won’t work right for automatic resizing, which is basically scale since it will change the offset when ever the screen size changes to fit it perfectly on the persons screen, I do this by converting the scale value of my grid layout to offset.
This is the entire script I use:

script.Parent.Parent.itemCategories.Frame.Container.Pets.Content.Frame:GetPropertyChangedSignal("AbsoluteCanvasSize"):Connect(function()
	local itemGridLayout = script.Parent.Parent.itemCategories.Frame.Container.Pets.Content.Frame.Items.UIGridLayout
	local backingGridLayout = script.Parent.Parent.itemCategories.Frame.Container.Pets.Content.Frame.Backings.UIGridLayout
	if itemGridLayout.Parent.Parent.values.gridMode.Value == "big" then
		itemGridLayout.CellSize = UDim2.new(0, 0.172 * itemGridLayout.Parent.Parent.AbsoluteCanvasSize.X, 0, 0.09 * itemGridLayout.Parent.Parent.AbsoluteCanvasSize.Y)
		backingGridLayout.CellSize = UDim2.new(0, 0.172 * backingGridLayout.Parent.Parent.AbsoluteCanvasSize.X, 0, 0.09 * backingGridLayout.Parent.Parent.AbsoluteCanvasSize.Y)
		itemGridLayout.CellPadding = UDim2.new(0, 0.024 * itemGridLayout.Parent.Parent.AbsoluteCanvasSize.X, 0, 0.013 * itemGridLayout.Parent.Parent.AbsoluteCanvasSize.Y)
		backingGridLayout.CellPadding = UDim2.new(0, 0.024 * backingGridLayout.Parent.Parent.AbsoluteCanvasSize.X, 0, 0.013 * backingGridLayout.Parent.Parent.AbsoluteCanvasSize.Y)
	else
		itemGridLayout.CellSize = UDim2.new(0, 0.124 * itemGridLayout.Parent.Parent.AbsoluteCanvasSize.X, 0, 0.065 * itemGridLayout.Parent.Parent.AbsoluteCanvasSize.Y)
		backingGridLayout.CellSize = UDim2.new(0, 0.124 * backingGridLayout.Parent.Parent.AbsoluteCanvasSize.X, 0, 0.065 * backingGridLayout.Parent.Parent.AbsoluteCanvasSize.Y)
		itemGridLayout.CellPadding = UDim2.new(0, 0.016 * itemGridLayout.Parent.Parent.AbsoluteCanvasSize.X, 0, 0.009 * itemGridLayout.Parent.Parent.AbsoluteCanvasSize.Y)
		backingGridLayout.CellPadding = UDim2.new(0, 0.016 * backingGridLayout.Parent.Parent.AbsoluteCanvasSize.X, 0, 0.009 * backingGridLayout.Parent.Parent.AbsoluteCanvasSize.Y)
	end
	print(script.Parent.Parent.itemCategories.Frame.Container.Pets.Content.Frame.CanvasSize)
end)

I will also show the properties of the scrolling frame the content is in if you guys can spot anything wrong:
![Screen Shot 2022-10-15 at 2.19.29 PM|179x500]
(upload://tBOY7Z46pwrZznLvW5TkVkSQBSQ.png)


I have no idea why its clipping everything when it is automatically changing the size of the canvas, I have not had this issue before in my other scrolling frames. Thanks for helping! If you ever need more info about something to help solve this, just ask.

For some reason, I enabled the automaticSize property for the Y value as well. Also found a bug, I basically just created a virus by making a event which detects a change in size which then I change the size of the thing the event is for which creates a loop, ignorant of me.