React how to display an image on top of the entire screen when the image is generated in one of the sub-components

Issue

I use a third party component (react-infinite-scroll-component) inside some other components to display a list of objects which some of them contain an image. What I want to do is that when the user clicks on the image, the image will be presented in full screen, that should cover the entire desktop screen.

Now the problem is I did make the image 'full screen' somehow but it's only filling the react-infinite-scroll-component in which this image resides, not the entire screen as I expect.

This is the main part that uses the scroll-component

<InfiniteScroll
   dataLength={arrs.length}
   hasMore={true}
   scrollThreshold={0}
   height={500}
   scrollableTarget="scrollableDiv"
  >
   {<Examples arrs={arrs} />}
</InfiniteScroll>

demonstration is here; To see the demo, simply click on the image, you will see the image is not filling the whole screen.

The styling is in s.scss file

Solution

In your .container selector, you should change the

position: absolute;

to

position: fixed;

Answered By - tpliakas