Flexbox shrink is not working in test environment

Hi there,

I am using Flexbox to align images from a multi-image CMS field. The two images have a different width, but the identical height. In the Designer the alignment is exactly how it should be, the images are automatically resized and the height is aligned (see read-only site). However when I am viewing the test environment the images are displayed with the same width (50%) and different heights.

This looks like a bug. Does anyone know how to get a workaround, or am I doing something wrong here?

Here is my site Read-Only:
https://preview.webflow.com/preview/rm-flexbox-test?utm_medium=preview_link&utm_source=designer&utm_content=rm-flexbox-test&preview=10b75ec2b8c144cb604f0cae009fb9af&pageId=5db02b30fcdc196ed023091b&itemId=5db02c021c624dc8ea62df5b&mode=preview

Here is my test environment:
https://rm-flexbox-test.webflow.io/test/test

Thanks for your help!

Screenshot Designer:

Screenshot Test environment:

I got help from the awesome Webflow support team:

It looks like this is expected behavior when it comes to how dynamic images are rendered in the designer vs. the published site, and that is where there is a bit of a difference between both. To work around this, I have made a simple video that will allow the images to fill up the respective space within their contained elements.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.