responsive gatsby image in flexbox container

I am struggling to get gatsby-image working with flexbox in a responsive way:

I would like all my images the same size and height and they should be responsive for mobile and desktop.

Is this the use case for gatsby image?

The only way I could get it to show was to add a fixed minWidth:

<div className={styles.header}>
  <GatsbyImage className={styles.image} fluid={image.fluid} style={{ minWidth: '100px' }} />

I tried to update the graphQl query to

          fluid(maxWidth: 100) {
            ...GatsbyContentfulFluid
          }

There is no minWidth only maxWidth.

I'm clearly totally missing how to use this.

How can I use gatsby-image in a flexbox container and I want all images to be the same size and height.

Solution

I haven't used Gatsby Image with Contentful, but usually for Gatsby Image I wrap each image component in a div and control the size that way.

import Img from "gatsby-image"

...

<div className="img-wrap">
    <Img fluid={image.childImageSharp.fluid} style={{width: "100%"}} />
</div>

//CSS

.img-wrap {
    width: 15vw;
}

The 'childImageSharp' bit in my GraphQL query is just in line with the standard Gatsby documentation; it may not be relevant for your case using Contentful.