Flex列中绝对定位元素的Overflow属性不符合预期问题

我想让绝对定位的红色盒子（.grandchild）水平溢出其包含元素，原本效果正常，但给青色的父容器（.parent）设置overflow-y: auto实现垂直滚动后，红色盒子被裁剪了。尝试设置overflow-y: scroll; overflow-x: visible后，overflow-x并未生效。想请教能不能同时让.parent盒子保持垂直滚动，又让.grandchild盒子完整显示？

代码示例 #

HTML #

<div class="grandparent">
  <div class="parent">
    <div class="child">
      <div class="grandchild"></div>
    </div>
    <div class="child"></div>
  </div>
</div>

CSS #

.grandparent {
  background-color: lime;
  display: flex;
  flex-direction: column;
  height: 150px;
  padding: 10px;
  width: 100px;
}

.parent {
  background-color: cyan;
  flex-grow: 1;
  overflow-y: auto;
}

.child {
  background-color: yellow;
  height: 100px;
  position: relative;
  width: 100px;
}

.child:not(:last-child) {
  margin-bottom: 10px;
}

.grandchild {
  background-color: red;
  height: 100px;
  left: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 200px;
}

解决方案 #

这是CSS的既定规则：当给元素设置overflow-y为非visible的值时，浏览器会强制将overflow-x也设为非visible（通常是auto或hidden），即使显式声明overflow-x: visible也无效——目的是避免滚动容器的布局冲突。

要实现需求，可采用以下两种方法：

方法一：将绝对定位元素移到滚动容器外 #

把.grandchild从.child中移出，放到和.parent同级的位置，通过定位让它和目标.child对齐，这样滚动容器的overflow设置就不会影响它。

修改后的HTML：

<div class="grandparent">
  <div class="parent">
    <div class="child" id="target-child"></div>
    <div class="child"></div>
  </div>
  <div class="grandchild"></div>
</div>

补充CSS：

.grandparent {
  position: relative; /* 让grandchild相对于它定位 */
}

.grandchild {
  position: absolute;
  left: calc(100% - 10px); /* 减去grandparent的padding值 */
  top: calc(10px + 50%); /* 加上padding和child的一半高度 */
  transform: translateY(-50%);
}

方法二：给滚动容器套一层无溢出限制的外壳 #

保留原有DOM结构，给.parent外面加一个没有overflow限制的外壳，让.parent负责滚动，外壳承载原来的青色背景。这样.child的绝对定位元素可以溢出到外壳外，不受.parent的overflow影响。

修改后的HTML：

<div class="grandparent">
  <div class="parent-wrap">
    <div class="parent">
      <div class="child">
        <div class="grandchild"></div>
      </div>
      <div class="child"></div>
    </div>
  </div>
</div>

修改后的CSS：

.parent-wrap {
  background-color: cyan; /* 把原来.parent的背景移到这里 */
  flex-grow: 1;
}

.parent {
  height: 100%;
  overflow-y: auto;
  /* 移除background-color */
}

这样.parent负责垂直滚动，.parent-wrap无溢出限制，.grandchild就能正常水平溢出显示。

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