How do I prevent elements with absolute position from overflowing?

I have attached a simple code snippet for a website. When hovering over the underlined words, images are supposed to appear. How can I prevent those images from “jumping out” of their container so that they will always be visible and don’t leave the screen?

The images are supposed to appear at the position of the correlating word.

I hope you understand the problem I’ve described here.

@charset "UTF-8";
/* CSS Document */

html, body {
    margin: 0;
    background-color: black;
}

#wrapper {
    margin: 0;
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: scroll;
}

.section {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    justify-content: center;
    text-align: left;
    position: relative;
}

p {
    color: white;
    font-family: Helvetica, sans-serif;
    font-size: 36px;
    margin-left: 100px;
    margin-right: 100px;
    text-align: left;
    display: block;
    width: 50%;
}

.gallery-image {
    position: absolute;
    display: none;
    transform: translate(0,calc(1em - 50%));
  max-width: 50vw;
    max-height: 75vh;
    height: auto;
z-index: 1000;
}

.gallery-link {
  position: relative;
  text-decoration: underline;
}

.gallery-link:hover > .gallery-image{
    display: flex; 
z-index: 1000; 
}

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
    
<div class="section">
<p>Title<br>
Nor is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain
<span class="gallery-link"><img  class="gallery-image" src="https://upload.wikimedia.org/wikipedia/commons/a/a0/590_Madison_Ave_IBM_08.jpg" >
vulnerability </span> of any.<br>
The once <span class="gallery-link">colorful rug<img class="gallery-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamentglas_B_-_Ansicht_1.jpg/1000px-Ornamentglas_B_-_Ansicht_1.jpg"></span> has been <span class="gallery-link">broken down<img class="gallery-image" src="https://upload.wikimedia.org/wikipedia/commons/4/4a/CocooningⓒShin%2C_Kyungsub.jpg" ></span> but is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain.<br>
End Quote
</p>
</div>          
</div>  

</body>
</html>