如何用纯CSS实现带悬停内容的横向滚动卡片且不推挤元素

完全可以不用JS实现这个效果，核心是避开overflow-x和overflow-y不能单独设置scroll/auto与visible的限制，把滚动容器和卡片的定位上下文拆分开：

关键思路 #

1. 给滚动容器套一个外层容器，外层容器设置overflow-y: visible，确保垂直方向不会裁剪内容；内层滚动容器只负责横向滚动，高度设为卡片主体的高度（或自适应），避免触发垂直滚动条。
2. 每个卡片单独放在一个容器里，给这个容器设置position: relative，作为悬停额外内容的定位上下文——这样额外内容用position: absolute定位时，会相对于卡片容器而非滚动容器，不会被滚动容器的overflow限制。
3. 额外内容默认隐藏，通过:hover伪类控制显示，利用opacity和visibility做过渡动画（避免布局抖动）。

代码示例 #

HTML结构 #

<div class="scroll-container-outer">
  <div class="scroll-container-inner">
    <div class="card-wrapper">
      <div class="card-main">
        <h3>卡片1</h3>
        <p>基础内容</p>
      </div>
      <div class="card-extra">
        <p>悬停显示的额外内容，不会推挤其他元素</p>
        <ul>
          <li>详情项1</li>
          <li>详情项2</li>
        </ul>
      </div>
    </div>
    <div class="card-wrapper">
      <div class="card-main">
        <h3>卡片2</h3>
        <p>基础内容</p>
      </div>
      <div class="card-extra">
        <p>这是另一张卡片的额外内容</p>
        <p>多行文本也不会影响滚动条</p>
      </div>
    </div>
    <!-- 更多卡片... -->
  </div>
</div>

CSS样式 #

/* 外层容器：确保垂直方向不裁剪 */
.scroll-container-outer {
  overflow-y: visible;
  width: 100%;
  max-width: 1200px;
  margin: 2rem auto;
}

/* 内层滚动容器：仅处理横向滚动 */
.scroll-container-inner {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  padding: 1rem 0;
  /* 高度设为卡片主体高度，避免触发垂直滚动 */
  min-height: 180px;
}

/* 卡片容器：作为额外内容的定位上下文 */
.card-wrapper {
  position: relative;
  flex: 0 0 300px;
}

/* 卡片主体样式 */
.card-main {
  background: #ffffff;
  border-radius: 8px;
  padding: 1.8rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  height: 100%;
}

/* 额外内容：默认隐藏，absolute定位脱离文档流 */
.card-extra {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #ffffff;
  border-radius: 0 0 8px 8px;
  padding: 1.2rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 10;
}

/* 悬停时显示额外内容 */
.card-wrapper:hover .card-extra {
  opacity: 1;
  visibility: visible;
}

/* 美化横向滚动条 */
.scroll-container-inner::-webkit-scrollbar {
  height: 8px;
}
.scroll-container-inner::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}
.scroll-container-inner::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}
.scroll-container-inner::-webkit-scrollbar-thumb:hover {
  background: #555;
}

原理说明 #

• 额外内容用absolute定位脱离文档流，不会改变其他元素的布局，自然不会推挤滚动条或页面内容。
• 把定位上下文放在card-wrapper而非滚动容器，避免额外内容被滚动容器的overflow裁剪，同时外层容器的overflow-y: visible确保内容能完整显示。
• 内层滚动容器的高度固定为卡片主体高度，不会因为额外内容的出现触发垂直滚动条。

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