如何在固定宽度下实现flex元素重叠并保持aspect-ratio？

核心需求 #

• 固定宽度的卡片容器内，卡片数量过多溢出时自动重叠；未溢出时按aspect-ratio:2/3保留原始尺寸
• 删除卡片后，剩余卡片不会出现尺寸过大的拉伸问题
• 容器高度固定，卡片宽度需保持恒定比例

当前问题 #

删除卡片后，剩余卡片因flex:1设置被过度拉伸；初始状态下卡片未实现溢出重叠效果。

解决方案 #

调整CSS代码 #

修改卡片容器和卡片的布局属性，实现溢出重叠并固定卡片尺寸：

.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-odd { background-color: gray; }
.card-even { background-color: darkkhaki; }

/* --- 关键修改部分 --- */
.card_area-4 {
  width: 100%;
  display: flex;
  flex-wrap: nowrap; /* 强制不换行，保持横向排列 */
  overflow: hidden; /* 隐藏溢出部分 */
  justify-content: flex-start; /* 卡片从左侧开始排列 */
  height: 100%; /* 固定容器高度 */
}

.card {
  flex: 0 0 auto; /* 禁止卡片拉伸 */
  aspect-ratio: 2/3;
  text-align: center;
  height: 110%;
  transform: translateY(-10%);
  min-width: calc(100% / 4); /* 最多显示4张不重叠卡片，可调整比例 */
  max-width: calc(100% / 4);
  margin-left: -25%; /* 重叠偏移量，数值越大重叠越多 */
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card:first-child {
  margin-left: 0; /* 第一张卡片取消偏移 */
}

.card:hover {
  z-index: 10; /* 悬停时显示在最上层 */
  background-color: aqua;
}

JS代码保持不变 #

原有的删除逻辑无需修改，删除卡片后剩余卡片会自动维持尺寸和重叠效果：

let cards = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
const card_els = Array.from(document.getElementsByClassName("card"));

card_els.forEach((card) => {
  card.addEventListener("click", (e) => {
    e.target.remove();
  });
});

关键逻辑说明 #

1. 容器布局：flex-wrap: nowrap强制卡片横向排列，overflow:hidden避免容器被溢出卡片撑开
2. 尺寸固定：flex:0 0 auto禁止卡片拉伸，min-width/max-width固定卡片宽度为容器的1/4（可根据需求调整为1/3、1/5等）
3. 重叠实现：通过负margin-left让卡片向左偏移，实现重叠效果；第一张卡片取消偏移避免整体左移
4. 交互优化：悬停时提升z-index，让当前卡片完整显示，确保点击操作正常

内容的提问来源于stack exchange，提问作者lorem1213