Fixed position doesn't pop Image out of div - css

Question

I've have problem with showing images on my project. I would like to show image when I hover text. It's working correctly if using Chrome but at least in Safari image stays partly hidden inside it's parent element.
Screenshot from Chrome
Screenshot from Safari
Code for parent element:
const PortfolioItemsWrapper = styled.div`
width: 100%;
max-width: 960px;
position: fixed;
bottom: 0;
overflow-x: scroll;
white-space: nowrap;
display: block;
text-align: center;
justify-content: center;
`
<PortfolioItemsWrapper>
{props.allWordpressWpPortfolio.edges.map(portfolioItem => (
<PortfolioWorks
key={portfolioItem.node.id}
image={portfolioItem.node.featured_media.source_url}
id={portfolioItem.node.id}
title={portfolioItem.node.title}
link={`/portfolio/${portfolioItem.node.slug}`}
/>
))}
</PortfolioItemsWrapper>
Code for image:
const Wrapper = styled.div`
display: inline-block;
margin: 0 10px;
`
const ImageWrapper = styled.div`
max-width: 300px;
position: fixed;
top: 50%;
left: 50%;
`
const PortfolioImage = styled.img`
max-width: 300px;
z-index: -5;
opacity: 0;
transition: 0.25s linear;
`
<Wrapper key={id}>
<ImageWrapper>
<PortfolioImage style={imageStyle} src={image} />
</ImageWrapper>
<PortfolioItemNameLink to={link} onMouseEnter={changeStyle} onMouseLeave={resetStyle}>
{title}
</PortfolioItemNameLink>
</Wrapper>

Answer 1

Although I'm not sure this might work:
Try adding overflow-y: visible; to your parents css.
Let me know if that works :)

Answer 2

I got this right by just pretty randomly testing things. Don't know why but it's working. If someone knows why I would like to know.
I set fixed position for parent div of PortfolioItemsWrapper.
const Wrapper = styled.div`
width: 100%;
max-width: 960px;
position: fixed;
bottom: 0;
`
const PortfolioItemsWrapper = styled.div`
width: 100%;
max-width: 960px;
white-space: nowrap;
overflow-y: visible;
overflow-x: scroll;
display: block;
text-align: center;
justify-content: center;
`