How do I make an overlay over an image cover the image in a scrollable container

Question

I have an image with varying size. This image is inside a container with overflow: auto. I want to place a grid over this image - which works fine, as long as the image is smaller than the container. As soon as the container has scrollbars, the grid overlay is limited to the container's height / width and will not cover the image.

Note that fixed is not an option, since this is a simplified use case. I do require the overlay to actually scroll together with the image.

(The actual use case will have multiple overlays, but for this demo, a single overlay should be enough to demonstrate the issue).

Scaling the image is not an option either.

Placing the image in a different tag could be an option, but since the image size may vary, I cannot have a div with a fixed size that has the image as a background image either - at least I don't know how to make that div have the image's actual size.

I guess it would be nice if the <img> could be the overlay's container, but AFAIK, img is a self-closing tag that does not allow to have children.

In other similar questions users suggested to use height: auto; min-height: 100%; for the overlay, but that does not work, as the container's size does not really change, it's just that the content becomes scrollable.

If possible I would like to avoid JS to calculate the overlay's height and width.

.container {
  position: relative;
  height: 200px;
  overflow: auto;
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    min-height: 100%;
    background-image: repeating-linear-gradient(  0deg, transparent, transparent 10px, #EEE 10px, #EEE 11px),
                        repeating-linear-gradient(-90deg, transparent, transparent 10px, #EEE 10px, #EEE 11px);  
}

<div class="container">
  <img src="https://lorempixel.com/500/500/" />
  <div class="overlay"></div>
</div>

Answer 1

CSS-Grid can do that..no position values required.

.container {
  height: 200px;
  display: inline-grid;
  overflow: auto;
}

img,
.overlay {
  grid-column: 1;
  grid-row: 1;
}

.overlay {
  z-index: 2;
  background-image: repeating-linear-gradient( 0deg, transparent, transparent 10px, #eee 10px, #eee 11px), repeating-linear-gradient( -90deg, transparent, transparent 10px, #eee 10px, #eee 11px);
}

<div class="container">
  <img src="https://lorempixel.com/500/500/" />
  <div class="overlay"></div>
</div>

Answer 2

The problem here is, that 100% is always measured on the height of the parent element. As soon as you change the height to e.g. 200px the 100% equals that amount.

The easiest fix in my opinion is to just wrap the whole thing in another container that gets the fixed height and leave the inner container free to grow as needed. That way the height of the inner container is calculated on its children and the grids 100% are indeed 100%.

.outer-container {
  height: 200px;
  overflow: auto;
}

.container {
  position: relative;
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    min-height: 100%;
    background-image: repeating-linear-gradient(  0deg, transparent, transparent 10px, #EEE 10px, #EEE 11px),
                        repeating-linear-gradient(-90deg, transparent, transparent 10px, #EEE 10px, #EEE 11px);  
}

<div class="outer-container">
  <div class="container">
    <img src="https://lorempixel.com/500/500/" />
    <div class="overlay"></div>
  </div>
</div>