How can I prevent random changes in size of the outer images within a div that is set to be centered within a horizontal flex in Webflow?

To prevent random changes in size of the outer images within a centered div within a horizontal flex in Webflow, you can follow these steps:

1. Make sure your outer image div is set to be a flex container. You can do this by selecting the div and going to the "Display" section in the Styles panel, then choosing "Flex" as the display option.

2. Set your flex container to have a horizontal layout. In the same "Display" section, select "Horizontal" under the "Flex Layout" options.

3. Choose the appropriate alignment and justify settings for your flex container. Since you want your images to be centered horizontally within the flex container, select "Center" for both the "Align" and "Justify" options in the "Flex Layout" settings.

4. Set a fixed width for your outer image div. This will ensure that the div maintains a consistent size regardless of the size of its content. You can do this by going to the "Sizing" section in the Styles panel and setting the width to a specific value, such as 100% of the parent container or a fixed pixel value.

5. Apply a style to your images. This can be done by selecting the individual images within the outer image div and editing their styles in the Styles panel. Make sure to set the image width and height to be responsive (preferably in percentage values) so that they scale proportionately as the container changes size.

By following these steps, your outer image div will remain centered within the horizontal flex container, and the images inside it will retain their size and aspect ratio, preventing any random changes in size.