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

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.

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. My brain is just not getting to the correct config.

Hopefully, I am overlooking something simple.

The following Stack Overflow answer helped me.

  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