[Vuejs]-Overflow hidden not working for absolute positioned element in grid

by

0👍

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%;
}

Leave a comment