UI overlaps when screen width is shrunk

As seen in the GIF, I was wondering how I can make it so that the inventory and the health/mana/etc. bars don’t end up overlapping when the screen size is changed. I’d like the inventory to stop moving as soon as it starts touching the main frame of the health/mana/etc.

I should note that there isn’t a problem with changing the height of the screen (using UIAspectRatioConstraint for that), and that everything is anchored properly, using scale instead of offset, etc.

https://gyazo.com/a104e60e866771c7ceadf98ed69d2919

I’m pretty sure it is because you are using two separate screenguis and whichever one goes on top of each other is the screengui with the lower zindex. If you wanted to fix this, you could have it all in one screengui

The backpack screengui is just some remants of something I was working on. The inventory (located under the Inventory frame) and the health/mana/etc. (located under the MainUI frame) are located in the same screengui. Using ZIndex will not fix this issue either.

I just tried replicating it and the problem happened once I added a UIAspectRatioConstraint to both frames and they had the same Dominant axis which was height however when I changed either both to width or one to height the problem did not persist. Don’t take my word for it as my knowledge in gui isn’t the best but I would recommended tweaking with the properties and see what works.

Unforch that doesn’t work either, I tried different combinations and by default I have them both on width and the problem still persists.