Horizontal layout nested not working correctly

I am trying to do a store with the UI using the layouts to fit multiple resolutions. I want to make a main panel with two panels with exactly 50% of the main panel. Inside the left one add more horizontal panels to allow lists of items. But it seems impossible!!

When adding elements to the little horizontal layouts for some reason the big left panel gets bigger and the right one gets smaller. Is there a way just to set the vertical layouts to always be 50% of the main panel?

The main horizontal panel has a Horizontal Layout group with Control child size both widht and height

The vertical layouts have a Layout element with flexible width and height = 1, and a vertical layout group with Control child size both widht and height

you didn’t share the inspector, but here’s the general setup (I know you’re already following some of the steps, but try going through this again):

  • set Control Child Size to height/width (do this by default everywhere, it’s a shame Unity didn’t do this by default)
  • disable Child Force Expand for width
  • add a Layout Element to both panels and set Flexible Width to 1
  • each panel should have a Vertical Layout Group with Control Child Size for width/height + disable Child Force Expand on both of them
  • the smaller horizontal panels inside the left panel: add a Horizontal Layout Group with Control Child Size for both height/width. then:
    – OPTION 1: Child Force Expand disabled
    – OPTION 2: set Flexible Width to 0, and enable Child Force Expand Width
  • don’t use any Content Size Fitter, I see this mistake all the time. CSF should only be on the root object, and that if you want to scale the object itself (not your case here)

I followed your steps but I got the same result