How to overlap flex items in a fix width?

The final result I want is this and the result I am able to obtained is this.

Basically I want the cards to overlap in a fixed width, when it is overflowing its parent.And when it is not overflowing, I want them to retain the width according to aspect ratio.I have fixed the height, so width also should be constant.

You can click on each card and it will be deleted in each link. But in the second/not working link, the card becomes too big which is also a problem.

How can I solve this?

<div class="container"><div class="player player-1"> p1 </div><div class="card_area card_area-1">card-1</div><div class="player player-2">p2</div><div class="card_area card_area-2">card-2</div><div class="player player-3">p3</div><div class="card_area card_area-3">card-3</div><div class="player player-4">p4</div><div id="render_cards" class="card_area  card_area-4"><div class="card card-odd card-1">card-1</div><div class="card card-even card-2">card-2</div><div class="card card-odd card-3">card-3</div><div class="card card-even card-4">card-4</div><div class="card card-odd card-5">card-5</div><div class="card card-even card-6">card-6</div><div class="card card-odd card-7">card-7</div><div class="card card-even card-8">card-8</div><div class="card card-odd card-9">card-9</div><div class="card card-even card-10">card-10</div><div class="card card-odd card-11">card-11</div><div class="card card-even card-12">card-12</div><div class="card card-odd card-13">card-13</div></div></div>

.container {  width: 60%;  margin: 5px auto;  border: 2px solid green;  aspect-ratio: 3/2;  display: grid;  grid-template-columns: repeat(6, 1fr);  grid-template-rows: repeat(6, minmax(0, 1fr));}.player {  display: flex;  align-items: center;  justify-content: center;  background-color: bisque;}.player-1 {  grid-row: 1;  grid-column: 3;}.card_area-1 {  grid-row: 1;  grid-column: 4;}.player-2 {  grid-row: 4;  grid-column: 6;}.card_area-2 {  grid-row: 3;  grid-column: 6;}.player-3 {  grid-row: 3;  grid-column: 1;}.card_area-3 {  grid-row: 4;  grid-column: 1;}.player-4 {  grid-row: 6;  grid-column: 2;}.card_area-4 {  grid-row: 6;  grid-column: 3/6;}.card_area {  background-color: rgb(232, 127, 127);}.card:hover {  background-color: aqua;}.card-odd {  background-color: gray;}.card-even {  background-color: darkkhaki;}.card_area-4 {  width: 100%;}.card:last-child {  flex: 0 0 auto;}.card {  flex: 1;  aspect-ratio: 2/3;  text-align: center;  height: 110%;  transform: translateY(-10%);  flex-start: start;  min-width: 100px;  max-width: auto;}.card {  display: flex;  justify-content: center;  align-items: center;} .card_area-4 {  display: flex;  justify-content: center;}

let cards = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];const card_els = Array.from(document.getElementsByClassName("card"));console.log(cards)card_els.forEach((card) => {  card.addEventListener("click", (e) => {    e.target.remove();    console.log("haha")  });});