实现堆叠卡片悬停展开效果：解决布局偏移问题

问题背景 #

我需要创建一个可容纳任意数量卡片的堆叠组件，核心需求是鼠标悬停时卡片能小幅展开。最初采用Grid布局实现，但遇到屏幕尺寸变化时末尾卡片会偏离堆叠区域的问题，推测是对Grid布局的使用经验不足导致的。此前一直在寻求解决方向或非Grid的更优实现方案。

以下内容已不再适用： 调整黄色盒子宽度并在绿色盒子内横向滚动，查看对卡片堆叠的影响。

最终实现方案（基于@Paul的方案） #

我已基于@Paul的方案完成代码更新，实现了满足需求的可滚动堆叠卡片组件，具体代码如下：

CSS代码 #

/*.wrapper-yellow {
  min-width: 30px;
  resize: horizontal;
  overflow: auto;
  max-width: fit-content;
  padding:20px;
  border: 2px solid yellow;
   border-radius: 8px;
   
}*/

.wrapper-list {
     /* 
     Old Solution commented out, new code based on Pauls anwser
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(17px, 1fr));
     grid-gap: 0%;*/
     
    display: flex;
      flex-direction: row;
    
    margin-top: 8px;
    margin-bottom: 8px;
   
    padding:10px;
    border: 2px solid green;
    border-radius: 8px;
    overflow-x: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.wrapper-list:hover > div:not(:first-child) {
      cursor: pointer;
     /* grid-gap: 1%;*/
       margin-left: -125px;
}

  
.wrapper-list::-webkit-scrollbar {
          display: none;
}

.card {
    position: relative;
    height: 114px;
    width: 164px;
    flex-shrink: 0;
    background-color: red;
    border: 2px solid blue;
    border-radius: 8px;
    
    display: inline-block;
    flex-shrink: 0;
      transition: all 0.3s ease-in-out;
}

/*.wrapper-list div:nth-child(n) {
      grid-row: 1 / 1;
}*/

.wrapper-list div:not(:first-child) {
      margin-left: -150px;
}

HTML代码 #

<!-- <div class="wrapper-yellow"> -->
  <div class="wrapper-list">
    <div class="card" style="z-index:25"></div>
    <div class="card" style="z-index:24"></div>
    <div class="card" style="z-index:23"></div>
    <div class="card" style="z-index:22"></div>
    <div class="card" style="z-index:21"></div>
    <div class="card" style="z-index:20"></div>
    <div class="card" style="z-index:19"></div>
    <div class="card" style="z-index:18"></div>
    <div class="card" style="z-index:17"></div>
    <div class="card" style="z-index:16"></div>
    <div class="card" style="z-index:15"></div>
    <div class="card" style="z-index:14"></div>
    <div class="card" style="z-index:13"></div>
    <div class="card" style="z-index:12"></div>
    <div class="card" style="z-index:11"></div>
    <div class="card" style="z-index:10"></div>
    <div class="card" style="z-index:9"></div>
    <div class="card" style="z-index:8"></div>
    <div class="card" style="z-index:7"></div>
    <div class="card" style="z-index:6"></div>
    <div class="card" style="z-index:5"></div>
    <div class="card" style="z-index:4"></div>
    <div class="card" style="z-index:3"></div>
    <div class="card" style="z-index:2"></div>
    <div class="card" style="z-index:1"></div>
 </div>
<!-- </div>-->

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