Gatsby: Image dissappears with CSS3 Flex

[aprather51]

I am trying to centralize the image (horizontal/vertical of screen) using CSS3 flex method. The image just disappears! Seem like Flex does not work with Gatsby-Image, Why? Any better alternative?

import React from 'react';
import { graphql, useStaticQuery } from 'gatsby';
import Img from 'gatsby-image';
import styled from 'styled-components';

const image = () => {
    const data = useStaticQuery(graphql`
        query Image {
            placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
                childImageSharp {
                    fluid(maxWidth: 300) {
                        ...GatsbyImageSharpFluid
                    }
                }
            }
        }
    `);
    return (
            <Wrapper>
                 <SetImg fluid={data.placeholderImage.childImageSharp.fluid} />
            <Wrapper>
);

export default image;

const SetImg = styled(Img)`
  display: block !important;
  margin: 0 auto;
`;

const Wrapper = styled,div`
  display: Flex;
  justify-content: center;
 align-items: center
`

[polarathene]

Give the image some width, it's elements are using 100% width/height:

const SetImg = styled(Img)`
  display: block !important;
  margin: 0 auto;
// above don't really do anything in this case
 flex-grow: 1; // use as much space as available
 width: 500px; // or set a specific size and it'll be centered within the available space of the flex parent.
`;

[aprather51]

@polarathene, That would work. At the same time I found another solution. Using .gatsby-image-wrapper _gatsby default class_ as nesting and override width size.

const Wrapper = styled,div`
  display: Flex;
  justify-content: center;
 align-items: center

//nesting
.gatsby-image-wrapper {
      width: 300px;
}
`