image disappears when container becomes flex container gatsby

I faced the same problem. Turned out it was because of lack of understanding of how Flexbox and Gatsby Image work.

You are using GatsbyImageSharpFluid. The "fluid" type of Gatsby image as opposed to "fixed". You've set a max width yes. But ultimately, the idea of "fluid" is that the image will take the size of its container. Max-width is the maximum it can extends to - reached only when the container reaches that width.

In flexbox, it's the content width that set the container width. It is the principle of flex... But a fluid image has no width so your flex container has no width too => your image doesn't appear.

Solution: setting a fixed width for your flex-item OR using fixed Gatsby Image instead.

See Gatsby doc on fixed vs fluid image: https://www.gatsbyjs.org/docs/gatsby-image/

My friend advised that I add

& > * {
  flex-grow: 1;
}

This applies flex-grow to the immediate children of the flex container.

I do not understand exactly why the image was disappearing, but it may have had something to do with the wrapper elements added by Gatsby.

I wanted to have the usual behavior of flexbox, which I believe would have both image and text div on the same line if space allowed, but I have had to mess around with adding max-width and min-width to get the behavior I want.