Как перекрывать гибкие элементы фиксированной ширины?

body {
  background: #888;
}

.cards {
  display: flex;
  margin-bottom: 1em;
  border: 3px dashed white;
  width: 250px;
  color: white;
  justify-content: start;
  padding-right: 50px;
}

.cards > div {
  height: 100px;
  flex-basis: 75px;
  position: relative;
  border: 3px solid black;
  box-sizing: border-box;
}

.cards > div > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 75px;
  height: 100%;
  transform: rotate(-5deg);
  padding: 5px;
  box-sizing: border-box;
}

.cards > div:nth-child(odd) > div {
  background: #ff0000df;
}

.cards > div:nth-child(even) > div {
  background: #0000ffdf;
}

.wider {
  width: 350px;
}

<!-- 5 cards -->
<div class = "cards">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<!-- 5 cards -->
<div class = "cards">
  <div><div>1</div></div>
  <div><div>2</div></div>
  <div><div>3</div></div>
  <div><div>4</div></div>
  <div><div>5</div></div>
</div>

<!-- 8 cards -->
<div class = "cards">
  <div><div>1</div></div>
  <div><div>2</div></div>
  <div><div>3</div></div>
  <div><div>4</div></div>
  <div><div>5</div></div>
  <div><div>6</div></div>
  <div><div>7</div></div>
  <div><div>8</div></div>
</div>

<!-- 11 cards -->
<div class = "cards">
  <div><div>1</div></div>
  <div><div>2</div></div>
  <div><div>3</div></div>
  <div><div>4</div></div>
  <div><div>5</div></div>
  <div><div>6</div></div>
  <div><div>7</div></div>
  <div><div>8</div></div>
  <div><div>9</div></div>
  <div><div>10</div></div>
  <div><div>11</div></div>
</div>

<!-- 8 cards in a wider container -->
<div class = "cards wider">
  <div><div>1</div></div>
  <div><div>2</div></div>
  <div><div>3</div></div>
  <div><div>4</div></div>
  <div><div>5</div></div>
  <div><div>6</div></div>
  <div><div>7</div></div>
  <div><div>8</div></div>
</div>

<!-- 4 cards in a wider container -->
<div class = "cards wider">
  <div><div>1</div></div>
  <div><div>2</div></div>
  <div><div>3</div></div>
  <div><div>4</div></div>
</div>

document.querySelectorAll('.contained').forEach(c => {
  const cards = Array.from(c.children)
  // calculate the total width of the cards, assuming they are all same width
  const widthOfCards = cards[0].clientWidth * cards.length
  // calculate the offset as the difference between the total width of the cards and the width of the container, divided by one less than the number of cards
  const offset = (widthOfCards - c.clientWidth) / (cards.length - 1)
  c.insertAdjacentHTML('afterbegin', `<span>container: ${c.clientWidth}<br>cards: ${widthOfCards}<br>offset: ${offset > 0 ? Math.round(offset * 1000) / 1000 : 'none'}</span>`)
  // if the container is wider than the cards, no adjustment is necessary
  if (offset <= 0) return
  for (i = 0; i < cards.length; i++) {
    const x = cards[i]
    x.style.left = `${-1 * i * offset}px`
  }
})

body {
  background: #888;
}

.cards {
  display: flex;
  margin-bottom: 1em;
  border: 3px dashed white;
  width: 250px;
  color: white;
  position: relative;
}

.cards > div {
  width: 75px;
  height: 100px;
  transform: rotate(-5deg);
  flex-shrink: 0;
  padding: 5px;
  box-sizing: border-box;
}

.cards > div:nth-child(odd) {
  background: #ff0000df;  
}

.cards > div:nth-child(even) {
  background: #0000ffdf;  
}

.contained > div {
  position: relative;
}

.wider {
  width: 350px;
}

.cards > span {
  font-size: 0.8em;
  position: absolute;
  left: 1em;
  bottom: 1em;
  z-index: 1;
}

<!-- normal scenario, cards overflow container -->
<div class = "cards">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<!-- 5 cards contained -->
<div class = "cards contained">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<!-- 8 cards contained -->
<div class = "cards contained">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

<!-- 8 cards contained in a wider container -->
<div class = "cards contained wider">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

<!-- 4 cards contained in a wider container -->
<div class = "cards contained wider">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>