image disappears when container becomes flex container gatsby

Question

I have a page I made with Gatsby version 2, and I want to make components from gatsby-image inside a flexbox container. The images appear when I remove the display: flex; property and disappear when the container is a flex container.

When I look at the CSS styles applied by Gatsby in the dev tools, I tried unselecting the properties one by one. When I unselect the position: absolute; property, the image appears, but it is not sized or placed correctly.

I have also tried setting flex-direction: column; on the container, which made the second of the two images appear. But, I would prefer this value to be row instead.

Setting overflow: visible !important; on the image did not make the image appear.

import React from "react"
import { Link } from "gatsby"
import { css } from "@emotion/core"
import Img from "gatsby-image"

const testPage = props => (
  <div
    css={css`
      display: flex;
      flex-direction: // column or row;
    `}
  >
    <Img
      fluid={props.data.ImgOne.childImageSharp.fluid}
      alt="description"
      fadeIn={true}
      style={{
        ...(props.style || {}),
        maxWidth: "400px",
        // position: "absolute",
        // overflow: "visible !important",
        ...props.data.ImgOne.childImageSharp.fluid.presentationWidth,
        margin: "0 auto", // Used to center the image
      }}
    />
    Some text to go in between pics.
    <Img
      fluid={props.data.ImgTwo.childImageSharp.fluid}
      alt="description"
      fadeIn={true}
    />
  </div>
)

export default testPage

export const pageQuery = graphql`
  query {
    ImgOne: file(relativePath: { eq: "ImageOne.jpg" }) {
      childImageSharp {
        fluid(maxWidth: 400) {
          ...GatsbyImageSharpFluid_withWebp
          presentationWidth
        }
      }
    }

    ImgTwo: file(relativePath: { eq: "ImageTwo.jpg" }) {
      childImageSharp {
        fluid(maxWidth: 800) {
          ...GatsbyImageSharpFluid_withWebp
        }
      }
    }
  }
`

Answer 1

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/

Answer 2

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.