Overflow hidden not working for absolute positioned element in grid

Question

I'm having trouble hiding an absolutely positioned image within a css grid. Here's what the code looks like:

HTML:

<div class="relative-parent">
  <div v-for="item in 12" class="hiding-parent">
    <div class="child"></div>
  </div>
</div>

Here, the relative-parent is the css-grid, with repeating hiding-parent elements

CSS:

.relative-parent {
  position: relative;
  width: 500px;
  height: 500px;
  display: grid;
  place-items: center;
  grid-gap: 5px;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: repeat(3, 100px);
}
.hiding-parent {
  overflow: hidden;
  width: 100px;
  height: 100px;
}

.child {
  position: absolute;
  width: 100%;
  height: 100%;
  background: red;
}

I need the child element to be the full width of the relative-parent. The child elements are all one image, absolutely positioned, so that if overflow: hidden works on the hiding-parent, it would look as if the image is split into 12 parts.

While using position: relative on the hiding-parent does fix the hiding, it makes each image the width of the hiding parent element, which defeats the purpose. I can't use position: absolute or fixed on the hiding-parent, since it would mess up the grid.

I'm a bit lost with this, and would really appreciate some help. Thank you!

Answer 1

Link: https://codesandbox.io/s/eager-worker-2pc5o?file=/src/App.js HTML:

    <div className="relative-parent">
      <div className="child item1">
        <img src="https://source.unsplash.com/random" />
      </div>
      <div className="child item2">
        <img src="https://source.unsplash.com/random" />
      </div>
      <div className="child item3">
        <img src="https://source.unsplash.com/random" />
      </div>
      <div className="child item4">
        <img src="https://source.unsplash.com/random" />
      </div>
      <div className="child item5">
        <img src="https://source.unsplash.com/random" />
      </div>
      <div className="child item6">
        <img src="https://source.unsplash.com/random" />
      </div>
      <div className="child item7">
        <img src="https://source.unsplash.com/random" />
      </div>
      <div className="child item8">
        <img src="https://source.unsplash.com/random" />
      </div>
      <div className="child item9">
        <img src="https://source.unsplash.com/random" />
      </div>
    </div>

CSS:

.relative-parent {
  display: grid;
  grid-gap: 5px;
  grid-template-areas:
    "one two three "
    "four five six "
    "seven eight nine";
}
.item1 {
  grid-area: one;
}
.item2 {
  grid-area: two;
}
.item3 {
  grid-area: three;
}
.item4 {
  grid-area: four;
}
.item5 {
  grid-area: five;
}
.item6 {
  grid-area: six;
}
.item7 {
  grid-area: seven;
}
.item8 {
  grid-area: eight;
}
.item9 {
  grid-area: nine;
}
.child {
  height: 200px;
  background: red;
}
.child img {
  width: 100%;
  height: 100%;
}