Adding flex to parent makes Photo component image disappear

[ansmlc]

I'm trying to create a custom module with image and text side-by-side using flex-row. But by adding flex either to parent element or the Photo component itself (via className prop) makes the image disappear.

            <div className="flex flex-row">
                <Photo
                    photo={items[0].customerPhoto}
                /> 
                <div>
                    <h2>
                        {items[0].text }
                    </h2>
                </div>
            </div>

I've tried changing the layout prop to fill and contain but it didn't help. Wrapping the Photo into a div of its own also didn't help. Tried with and without hasDisplayOptions in the schema (with and without setting Aspect Ratio in Sanity), but no difference.

Assuming it's a CSS issue but can't figure out what's causing it.

[ndimatteo]

Hey there @ansmlc the reason your image appears to disappear (see what I did there?) is because when you set flex on the parent container, the <Photo /> element doesn't have a known width, and by default flex items do not grow to fill the container.

What you need to do is give a width to the <Photo /> component. Simply adding w-full should do the trick to make it take up the width of the flex container.

I hope that helps, let me know if you have any other issues!