为何display:inline-flex引发窗口横向滚动？如何固定卡片尺寸

核心布局思路 #

• 外层容器设 width: 100% + overflow: hidden，截断超出视口的卡片，彻底避免全局横向滚动条
• 内层卡片列表用 display: flex，给卡片固定宽高并设置 flex-shrink: 0，强制卡片不被压缩
• 通过CSS动画控制内层列表的 transform: translateX() 属性，实现从右向左的滚动效果

完整代码示例 #

HTML结构 #

<div class="scroll-container">
  <div class="card-list">
    <div class="card">卡片1</div>
    <div class="card">卡片2</div>
    <div class="card">卡片3</div>
    <!-- 可任意添加更多卡片 -->
  </div>
</div>

CSS样式 #

/* 外层容器：隐藏超出内容，无滚动条 */
.scroll-container {
  width: 100%;
  overflow: hidden;
  height: 320px; /* 和卡片高度+间距匹配 */
  border: 1px solid #eee;
}

/* 内层卡片列表：flex布局，卡片不换行 */
.card-list {
  display: flex;
  gap: 16px; /* 卡片间距 */
  animation: scroll-left 20s linear infinite; /* 滚动动画，时长按需调整 */
}

/* 固定卡片宽高，禁止压缩 */
.card {
  width: 200px;
  height: 300px;
  flex-shrink: 0;
  background: #f5f5f5;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

/* 从右向左滚动的动画逻辑 */
@keyframes scroll-left {
  0% {
    transform: translateX(100%); /* 初始状态：整个列表在容器右侧外 */
  }
  100% {
    transform: translateX(calc(-100% - 16px)); /* 滚动至完全离开容器左侧，减去间距避免留白 */
  }
}

关键细节补充 #

• 动画时长：卡片数量越多，时长设越长，滚动速度会更均匀自然
• 鼠标暂停需求：若需要鼠标悬停时暂停滚动，给 .card-list 加以下样式：

.card-list:hover {
  animation-play-state: paused;
}

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