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.