overflow-x:scroll搭配overflow-y:visible时absolute元素内容隐藏问题求解

说明：此问题并非重复提问，已查阅Stack Overflow上所有相关问题。

有一个设置了overflow-x: scroll的div，希望其overflow-y为visible。该div内部有一个position: absolute的子div，但目前y方向溢出时，这个绝对定位div内的内容会被隐藏。

以下是简化版HTML和CSS结构：

CSS代码 #

.zooming-bar {
  width: 100%;
  padding: 2px 0;
  background: hsl(0, 0%, 40%);
  position: relative;
  cursor: move;
  display: flex;
  height: 100px;
  overflow-x: scroll;
  overflow-y: visible;
}

.scrollable-bar {
  width: 100%;
  cursor: pointer;
  margin: 0 auto;
  position: relative;
  top: 30px;
  display: flex;
  flex-direction: column;
  height: 25px;
  margin-left: 0;
}
.buttons-block {
  position: relative;
  top: 50px;
}

.buttons-group {
  height: 30px;
}
.flex-wrap {
  flex-wrap: wrap;
}
.sub-segment-wrapper {
  margin-left: 0;
  top: -55px;
}

.segment-wrapper {
  margin-left: 2px;
  margin-right: 2px;
  margin-top: 2px;
  display: flex;
  width: 100%;
  height: fit-content;
  position: absolute;
}
.button-segment {
  color: #000;
  text-align: center;
  font-family: "Poppins Regular";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  background-color: #ff7e64;
  height: 20px;
  width: 100%;
  margin-right: 2px;
  position: relative;
  border: 2px solid transparent;
  line-height: 15px;
}

.button-card-task-description {
  height: 25px;
  padding-top: 10px;
}
.button-info-card {
  position: absolute;
  background: #ffffff;
  bottom: 35px;
  z-index: 5;
  width: 85%;
  border-radius: 5px;
  right: 0;
  filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.25));
  border-left: 12px solid #f2f2f2;
  padding: 5px;
}
.button-info-card:after {
  content: "";
  position: absolute;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  top: 100%;
  border-top: 12px solid #ffffff;
  margin-top: 0;
  right: 25px;
}
.button-label-inside {
  z-index: 2;
  position: relative;
  padding: 0 5px;
}
.content-pane {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background: hsl(240deg 19.32% 67.79%);
  height: 40px;
  align-items: center;
}
.content-pane > div {
  margin: 3px;
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Example code</title>
  </head>
  <body>
    <div>
      <div class="content-pane">
        <div>Content1</div>
        <div>Content2</div>
        <div>Content3</div>
        <div>Content4</div>
        <div>Content5</div>
      </div>
      <div class="content-pane">
        <div>Content1</div>
        <div>Content2</div>
        <div>Content3</div>
        <div>Content4</div>
        <div>Content5</div>
      </div>

      <div class="zooming-bar">
        <div class="scrollable-bar">
          <div class="buttons-block">
            <div
              class="segment-wrapper flex-wrap buttons-group"
              style="left: 10%"
            >
              <div
                class="segment-wrapper flex-wrap sub-segment-wrapper button-main"
                style="left: 0%; width: 15%"
              >
                <div class="button-segment segment-button-main ">
                  <span class="button-info-card"
                    ><span class="button-card-task-description">
                      Lorem ipsum dolor sit amet consectetur adipisicing elit.
                      Tempora, nihil eaque? Sequi ab, magni ducimus qui corporis
                      natus repellendus. Officiis eum architecto commodi maxime
                      illo iste aliquam enim mollitia odit?
                    </span></span
                  ><span class="button-label"
                    ><span class="button-label-inside">Button Label</span></span
                  >
                </div>
              </div>
            </div>
          </div>

          <div class="buttons-block">
            <div
              class="segment-wrapper flex-wrap buttons-group"
              style="left: 40%"
            >
              <div
                class="segment-wrapper flex-wrap sub-segment-wrapper button-main"
                style="left: 0%; width: 25%"
              >
                <div class="button-segment segment-button-main ">
                  <span class="button-info-card"
                    ><span class="button-card-task-description">
                      Lorem ipsum dolor sit amet consectetur adipisicing elit.
                      Tempora, nihil eaque? Sequi ab, magni ducimus qui corporis
                      natus repellendus. Officiis eum architecto commodi maxime
                      illo iste aliquam enim mollitia odit?
                    </span></span
                  ><span class="button-label"
                    ><span class="button-label-inside">Button Label</span></span
                  >
                </div>
              </div>
            </div>
          </div>

          <div class="buttons-block">
            <div
              class="segment-wrapper flex-wrap buttons-group"
              style="left: 70%"
            >
              <div
                class="segment-wrapper flex-wrap sub-segment-wrapper button-main"
                style="left: 0%; width: 25%"
              >
                <div class="button-segment segment-button-main ">
                  <span class="button-info-card"
                    ><span class="button-card-task-description">
                      Lorem ipsum dolor sit amet consectetur adipisicing elit.
                      Tempora, nihil eaque? Sequi ab, magni ducimus qui corporis
                      natus repellendus. Officiis eum architecto commodi maxime
                      illo iste aliquam enim mollitia odit?
                    </span></span
                  ><span class="button-label"
                    ><span class="button-label-inside">Button Label</span></span
                  >
                </div>
              </div>
            </div>
          </div>

          <div class="buttons-block">
            <div
              class="segment-wrapper flex-wrap buttons-group"
              style="left: 110%"
            >
              <div
                class="segment-wrapper flex-wrap sub-segment-wrapper button-main"
                style="left: 0%; width: 25%"
              >
                <div class="button-segment segment-button-main ">
                  <span class="button-info-card"
                    ><span class="button-card-task-description">
                      Lorem ipsum dolor sit amet consectetur adipisicing elit.
                      Tempora, nihil eaque? Sequi ab, magni ducimus qui corporis
                      natus repellendus. Officiis eum architecto commodi maxime
                      illo iste aliquam enim mollitia odit?
                    </span></span
                  ><span class="button-label"
                    ><span class="button-label-inside">Button Label</span></span
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

需求 #

希望.zooming-bar内的内容完全可见，实现overflow-x为scroll、overflow-y为visible的同时，让.zooming-bar内的内容在y方向完全显示，弹窗部分能显示在上方内容之上，且不想给相关div添加额外的padding或margin。

核心原因是CSS规范限制：当元素设置overflow-x: scroll（或auto、hidden）时，overflow-y: visible会被浏览器强制解析为auto，导致y方向溢出内容被裁剪。解决思路是拆分容器结构，分离横向滚动和绝对定位弹窗的父容器：

步骤1：调整HTML结构 #

给.zooming-bar内部的.scrollable-bar套一个新容器，专门实现横向滚动，.zooming-bar本身不再处理滚动逻辑：

<div class="zooming-bar">
  <!-- 新增滚动容器 -->
  <div class="scroll-container">
    <div class="scrollable-bar">
      <!-- 原有buttons-block内容不变 -->
    </div>
  </div>
</div>

步骤2：修改CSS样式 #

1. 调整.zooming-bar样式，移除横向滚动设置，保留overflow-y: visible作为弹窗的定位参考：

.zooming-bar {
  width: 100%;
  padding: 2px 0;
  background: hsl(0, 0%, 40%);
  position: relative;
  cursor: move;
  display: flex;
  height: 100px;
  overflow-y: visible;
  /* 移除overflow-x: scroll */
}

2. 新增.scroll-container样式，实现横向滚动：

.scroll-container {
  width: 100%;
  overflow-x: scroll;
  overflow-y: visible;
  height: 100%;
}

3. 提升弹窗层级，确保显示在上方内容之上：

.button-info-card {
  position: absolute;
  background: #ffffff;
  bottom: 35px;
  width: 85%;
  border-radius: 5px;
  right: 0;
  filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.25));
  border-left: 12px solid #f2f2f2;
  padding: 5px;
  z-index: 10; /* 确保层级高于上方content-pane */
}

原理说明 #

通过将横向滚动逻辑转移到内部的.scroll-container，.zooming-bar的overflow-y: visible能被浏览器正确解析，内部绝对定位的弹窗可以突破.zooming-bar的边界显示，同时不影响横向滚动功能。

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