Parent layout group being changed by child

Hi all,

In the below image, the large full-height white block on the left should be 50% of the screen. However each time I add a "Name" block, the full-height white block's width shrinks.



I want a 50% split at the top level, which I thought I could achieve with a HorizontalLayoutGroup and both children having a LayoutElement with FlexibleWidth at 1. But child groups seem to be affecting that width, rather than just operating inside their boundaries.

Does anyone have some tips of how to accomplish this? I'm basically trying to create areas in a grid, and then use additional groups as children to then layout within those areas. I don't want them to affect any parent layouts.

I am not using any ContentSizeFitters.

Thanks!

Edit: It seems like adding even a single child to one of the children starts to change how the parent VerticalLayoutGroup sizes the children. Is there a way to have layout groups unaffected by their children's content? That seems like strange behaviour.

Edit 2: Ok, the issue seems to be children of a LayoutGroup that are not all the same type of LayoutGroup cause the size calculations to break. e.g.:

Parent: VerticalLayoutGroup
Children: Two HorizontalLayoutGroups, One VerticalLayoutGroup.

The children will not be sized correctly. But if all children are the same type of LayoutGroup, it will work.

Edit 3: It looks like I can achieve what I want to achieve by adding a GameObject between the parent and the child LayoutGroup. This makes the child LayoutGroup respect the parent. But direct LayoutGroups as children of either other seem to behave unexpectedly.

 

Yes, layout groups and their content with layout elements do not always behave as you would expect.
I use Layout groups only if I have dynamic content (adding / removing elements during runtime). If not, I always use anchors to solve the problem.
check out the third video of my tool Better UI to get a better understanding about anchors:
https://assetstore.unity.com/packages/tools/gui/better-ui-79031

 

Interesting video. What is the benefit of using anchors for handling multiple resolutions versus a CanvasScaler? Having an empty object in between LayoutGroups seems to solve my issue. Though it makes for a cluttered hierarchy, which annoys me.

I come from web development, so I yearn for a solid solution to UIs similar to HTML/CSS. (Admittedly I haven't investigated this a whole lot.) But using LayoutGroups seems the most flexible to me. I can easily change the order of something by changing its position in the hierarchy. Using anchors seems like that would be a much more involved process?