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

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