Firefox中HTML/CSS轮播元素重叠问题的修复方案咨询

我按照教程制作了纯CSS轮播组件，Chrome中6个元素可正常滚动展示，但Firefox里第一组的5、6号卡片会被第二组的1、2号遮挡，仅能看到前4个元素滚动。已知问题源于.group容器宽度小于子元素总宽度，现提供修复方法：

原始代码 #

HTML代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pen</title>
  </head>
  <body>
        <div class="carousel">
            <div class="group">
                <div class="card">1</div>
                <div class="card">2</div>
                <div class="card">3</div>
                <div class="card">4</div>
                <div class="card">5</div>
                <div class="card">6</div>
            </div>
            <div aria-hidden class="group">
                <div class="card">1</div>
                <div class="card">2</div>
                <div class="card">3</div>
                <div class="card">4</div>
                <div class="card">5</div>
                <div class="card">6</div>
            </div>
        </div>
    <script src="./script.js"></script>
  </body>
</html>

CSS代码

.carousel {
  margin: 100px auto;
  width: 90%;
  border: 5px solid red;
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
}
.group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  animation: spin 5s infinite linear;
  padding-right: 1em;
}
.card {
  flex: 0 0 2em;
  height: 2em;
  padding: 1em;
  background: cornflowerblue;
  font-size: 3rem;
  border-radius: .2em;
  text-align: center;
  align-content: center;
}
@keyframes spin {
  from { translate: 0;}
  to { translate: -100%;}
}

修复方案 #

问题原因：Firefox中，当.carousel（父flex容器）设置overflow-x: auto时，子flex容器.group的宽度计算未正确包含所有子元素的总宽度（包括gap和padding-right），导致容器被压缩，后续组的元素会覆盖前面组的内容。

只需给.group添加flex-shrink: 0，强制容器保持自身完整宽度，不被父容器压缩：

修改后的CSS代码（仅修改.group部分）

.group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  animation: spin 5s infinite linear;
  padding-right: 1em;
  flex-shrink: 0; /* 添加这一行 */
}

添加后，.group会正确计算自身宽度（6个卡片宽度 + 5个gap + padding-right），动画滚动时不会出现元素遮挡问题，Firefox和Chrome都能正常展示所有6个元素的滚动效果。

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