I'd like to show a horizontal series of a unknown number of playing cards. To do this, they will have to overlap if there are too many. I'm having trouble convincing a flex box to overlap the cards without shrinking them. The example below shrinks the cards. I tried flex-shrink: 0, but then max-width wasn't respected.
.cards { display: flex; max-width: 300px;}.card { width: 50px; height: 90px; border: 1px solid black; border-radius: 3px; background-color: rgba(255, 0, 0, 0.4);}<div class='cards'><div class='card'></div><div class='card'></div><div class='card'></div><div class='card'></div><div class='card'></div><div class='card'></div><div class='card'></div><div class='card'></div><div class='card'></div></div>