Position absolute flex parent cuts the box-shadow of flex items-CodePudding

I've encountered an issue with applying a box-shadow to a flex container, positioned absolute with flex-items having a negative margin. For the context, I am trying to display a set of playing cards one next to another overlapping horizontally.

body {
  background-color: green;
}

.game-container {
  background-color: yellow;
  background-size: 1159px 771px;
  background-position: top;
  background-repeat: no-repeat;
  background-position: top;
  position: relative;
  height: 100vh;
}

.player-hand-1 {
  top: -172px;
  left: 50%;
  transform: translate(calc(-50%   80px), 0);
  display: flex;
  position: absolute;
  box-shadow: 29px 33px 21px rgba(0, 0, 0, 0.24);
}

.player-hand-1 img {
  margin-left: -160px;
  background: red;
  border: 1px solid white;
}

.card {
  width: 200px;
  height: 280px;
}

<!DOCTYPE html>
<html>

<body>
  <div >
    <div >
      <img src="/static/media/cardBack.15757e9ce5d42038580a.png" alt="Their card" >
      <img src="/static/media/cardBack.15757e9ce5d42038580a.png" alt="Their card" >
      <img src="/static/media/cardBack.15757e9ce5d42038580a.png" alt="Their card"  />
      <img src="/static/media/cardBack.15757e9ce5d42038580a.png" alt="Their card"  />
      <img src="/static/media/cardBack.15757e9ce5d42038580a.png" alt="Their card"  />
    </div>
  </div>
</body>

</html>

I've tried to add a pseudo element to the player-hand, but had no visible result.

.player-hand-1 {
  &:after {
    content: '';
    clear: both;
  }
}

I've been trying to wrap the image in another div, giving it position absolute and setting the box shadow on it.

How can I get the box-shadow to be the same width as all of the flex-items united?

I've modified my code so that it was a minimum working example.

CodePudding user response：

Your cards are overflowing the box.

You may use filter instead : filter:drop-shadow( 29px 33px 21px rgba(0, 0, 0, 0.24)); , it will draw the shadow from the visible content of the box and not only from it's real size/area it covers.

possible example:

body {
  background-color: green;
}

.game-container {
  background-color: yellow;
  background-size: 1159px 771px;
  background-position: top;
  background-repeat: no-repeat;
  background-position: top;
  position: relative;
  height: 100vh;
}

.player-hand-1 {
  top: -172px;
  left: 50%;
  transform: translate(calc(-50%   80px), 0);
  display: flex;
  position: absolute;
  filter:drop-shadow( 29px 33px 21px rgba(0, 0, 0, 0.24));
}

.player-hand-1 img {
  margin-left: -160px;
  background: red;
  border: 1px solid white;
}

.card {
  width: 200px;
  height: 280px;
}

<!DOCTYPE html>
<html>

<body>
  <div >
    <div >
      <img src="/static/media/cardBack.15757e9ce5d42038580a.png" alt="Their card" >
      <img src="/static/media/cardBack.15757e9ce5d42038580a.png" alt="Their card" >
      <img src="/static/media/cardBack.15757e9ce5d42038580a.png" alt="Their card"  />
      <img src="/static/media/cardBack.15757e9ce5d42038580a.png" alt="Their card"  />
      <img src="/static/media/cardBack.15757e9ce5d42038580a.png" alt="Their card"  />
    </div>
  </div>
</body>

</html>