Scale Horizontal Layout Group's child layout elements while maintaining their aspect ratio

Question

I am trying to maintain the aspect ratio of child elements within a Horizontal Layout Group when the total width of children would exceed the Layout Group's width.

Given the Horizontal Layout Group below, the child squares' total width fits within the parent so they do not need to scale:

If we add more children and their total width exceeds the Layout Group's width, but by default they do not scale accordingly:

The desired outcome would be that they scale proportionally to fit the Layout Group's width:

I have tried various configurations of settings on the Layout Group's properties and just cannot produce the desired outcome.

The closest I can get the below by checking Control Child Size: Width and setting a Layout Element component on the child and setting the preferred width and height.

Control Child Size: Whether the Layout Group controls the width and height of its child layout elements.

Use Child Scale: Whether the Layout Group considers the scale of its child layout elements when sizing and laying out elements. Width and Height correspond to the Scale > X and Scale > Y values in each child layout element’s Rect Transform component.

Child Force Expand: Whether to force the child layout elements to expand to fill additional available space.

My brain is just not getting to the correct config.

Hopefully, I am overlooking something simple.

Answer 1

I tried following these examples, but the problem with the Child Force Expand is that it causes the height of the child elements to exceed the height of the parent, which with a lot of menu systems, this is not desirable. The Accepted Answer animation starts with enough elements to fill the parent width which is a bit deceptive... what if you remove one child from that example? The children's width will fill the space, and will overflow the boundaries of the parent, which at least for my case, was not desirable.

The flow would be better to have the above behaviour, but with also a "max-width" concept applied so that the child elements don't expand to cover too much of the screen. We need the child elements to only shrink if there's not enough space to display them properly.

I was able to achieve the desired effect by combining ideas from the OP and the Answer with the following config:

• Horizontal Layout Group on the parent, with Control Child Size:Width selected.
• Aspect Ratio Fitter with Width Controls Height set on the child

With this setting, the Horizontal Group seems to set the width of the children to zero, which is fixed with a Layout Element

• Layout Element on the child, with Preferred Width set (and NOT the Preferred Height)

This seems to allow the Child element to have the right Width if there isn't any crowding, but shrinks down if needed by the parent. And the height is managed by the Aspect Ratio.

The results. Here's where elements don't fill the container

Here's where the elements would exceed the width, so the elements shrink.

Answer 2

Alternative Solution that worked in my case:

1. Create a Horizontal Layer Group
2. Tick Control Child Size : Width
3. Tick Child Force Expand : Width & Height
4. Each child that you add inside the layout group must have an Aspect ratio fitter with:
   1. Aspect mode: Width Controls height
   2. Aspect Ratio: 1

Answer 3

It's possible:

1. Create a Horizontal Layer Group
2. Tick Control Child Size : Width
3. Tick Child Force Expand : Width & Height
4. Add an empty GameObject inside this Horizontal Layer Group
5. Add another empty GameObject inside the GameObject you made in step 4
6. Add an Aspect Ratio Fitter component to the GameObject you made in step 5
7. Set Aspect Mode : Fit In Parent