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>