div adds space at the end of an child element

I just built myself a container that contains an image an on hover shows a text. But now if I paste some of those containers in a flex container, it seems to add some space at the end of every image container. I'm sitting on that problem for a few hours now and I think I'm blind now. I tried using every possible display prop that exists, but none work for me. Can anyone help me? I'm desperate

You can see the effect in the following picture: [1]: https://i.stack.imgur.com/Xmeio.jpg

Here is the HTML of the component:

    <div className={classes.imgWrap} style={props.divStyle}>
        <img className={classes.img} alt="img" src={props.img} style={props.imgStyle} />
        <div className={classes.imgTextWrap} style={props.imgStyle}>
            {props.textComponent}
        </div>
    </div>

The style attribute just delivers a max-width: of 400px and a width: of 80%

The styling looks like this:

const useStyles = makeStyles(theme => ({
imgTextWrap: {
    position: "absolute",
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    background: fade(theme.palette.primary.light, 0.5),
    color: theme.palette.contrast,
    visibility: "hidden",
    opacity: 0,
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    flexDirection: "column",
    /* hover off*/
    transition: "opacity 0.3s ease-in, visibility 0.3s",

    '&:hover': {
        visibility: "visible",
        opacity: 1,
        /* hover on*/
        transition: "opacity 0.2s ease-out, visibility 0.2s",
    }
},
imgWrap: {
    position: "relative",
    display: "inline-grid",
    height: "fit-content",
    width: "fit-content",

    '&:hover': {
        '& $imgTextWrap': {
            visibility: "visible",
            opacity: 1,
            /* hover on*/
            transition: "opacity 0.2s ease-out, visibility 0.2s",
        }
    }
},
img: {
    objectFit: "cover"          
}}));

The container which contains those image components has just the following styles:

display: flex, 
justify-content: center, 
align-items: center

Edit: Now I know that the space is caused by giving the img tag a width and a max-width. While the img tag uses the width, it always leaves space for the max-width. In My use case the max-widthof 85%is most of the times smaller then width: 450px. Is there any way to fix that?