What is the best way to make a row of DIVs stack on top of each other if there are too many to fit in the parent. Something like holding a fan of cards. Ideally this would be CSS only as the amount of DIVs is dynamic.
I have tried all of the justify content modes and none had the desired effect. I also tried the z-index, but I couldn't get it to work with a dynamic amount of DIVs with just CSS. I could write something in JS but I'd honestly like to find a cleaner way to do this.
HTML:
<div class="card-container"><div class="card" draggable="True"></div><div class="card" draggable="True"></div><div class="card" draggable="True"></div><div class="card" draggable="True"></div><div class="card" draggable="True"></div><div class="card" draggable="True"></div></div>CSS:
.card { background-color: #ffffff; width: 200px; min-width: 200px; height: 280px;}.card-container { background-color: #000000; display: flex; flex-direction: row; margin: auto; justify-content: space-evenly;}