Container Inset box-shadow over child image

I have a container which holds a child image, and that container has a scrollable overflow. I'm trying to add an inset box-shadow which overlays the image to give the impression that the image is set behind a frame. I'm running into a bunch of issues though. Using a :after pseudo element, I am able to achieve the overlay I want, however, the box-shadow itself ends up having a scrollable overflow as well. That is to say, when I scroll the image, the box shadow will also scroll, resulting in the container border hiding the box-shadow. How would I go about fixing this so that the box-shadow maintains it's positioning when scrolling?

.map-container {
        margin: 10px;
        position: relative;
        text-align: center;
        height: 600px;
        overflow-y: scroll;
    }
    
    .map-container::after {
        box-shadow: inset 8px 8px 10px #888888;
        content: '';
        display: block;
        height: 100%;
        position: absolute;
        top: 0;
        width: 100%;
    }

<div class="map-container">
       <img id="map" src="https://picsum.photos/seed/picsum/800/800" alt="map" height="800px">
    </div>

UPDATE 1: I think I've figured out a workaround!

I've wrapped both the container and the image in a new parent div for just the box shadow. I've changed the z-index of the image itself to -1 and changed it's position to relative This gets me a box shadow that does not scroll into the overflow. This did however cause an issue where the scroll bar is inside the confines of the box-shadow. To move the scroll bar to the outside, I changed margin-right of the container to -20px.

 <div id="map_shadow">
       <div class="map-container">
          <img id="map" src="img/pub_map.png" alt="map" height="800px">
       </div>
    </div>

.map-container {
    margin-right: -20px;
    position: relative;
    text-align: center;
    height: 600px;
    overflow-y: scroll;
}

#map {
    position: relative;
    z-index: -1;
}

#map_shadow {
    margin: 20px;
    padding-right: 0px;
    box-shadow: inset 8px 8px 10px #888888;
}

Things I've tried:

Played around with absolute positioning as well as Z-index to no avail.

Tried getting rid of the image div and instead adding the image as the background-image of the container, but this seems to prevent scrollable overflow and messes with the aspect ratio in such a way that is not workable.

Tried creating a separate "shadow" div within the parent container with intent to have it overlay the image. This works but this results in the same issue where the box-shadow still scrolls.

Attempted adding an inset box-shadow to the image itself, but the image just overlays it.

Getting rid of the overflow and decreasing the height of the image is not an option, as parts of the image then become too small to be legible.