htmlcssflexboxshadowabsolute

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


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 class="game-container">
    <div class="player-hand-1">
      <img src="/static/media/cardBack.15757e9ce5d42038580a.png" alt="Their card" class="card">
      <img src="/static/media/cardBack.15757e9ce5d42038580a.png" alt="Their card" class="card">
      <img src="/static/media/cardBack.15757e9ce5d42038580a.png" alt="Their card" class="card" />
      <img src="/static/media/cardBack.15757e9ce5d42038580a.png" alt="Their card" class="card" />
      <img src="/static/media/cardBack.15757e9ce5d42038580a.png" alt="Their card" class="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.


Solution

  • 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 class="game-container">
        <div class="player-hand-1">
          <img src="/static/media/cardBack.15757e9ce5d42038580a.png" alt="Their card" class="card">
          <img src="/static/media/cardBack.15757e9ce5d42038580a.png" alt="Their card" class="card">
          <img src="/static/media/cardBack.15757e9ce5d42038580a.png" alt="Their card" class="card" />
          <img src="/static/media/cardBack.15757e9ce5d42038580a.png" alt="Their card" class="card" />
          <img src="/static/media/cardBack.15757e9ce5d42038580a.png" alt="Their card" class="card" />
        </div>
      </div>
    </body>
    
    </html>