在弹性列中绝对定位的项目上溢出无法按预期工作

Question

我有一个绝对定位的元素，我想水平溢出它包含的元素。这将按预期工作，直到我将其任何包含元素的

overflow

属性更改为

visible

以外的任何内容，这是我需要做的，以便让其中一个元素垂直滚动。我假设添加

overflow-y: scroll; overflow-x: visible

会给我想要的结果，但它似乎不尊重

overflow-x

属性。

如果从下面代码中的

overflow-y: auto

元素中删除

.parent

，您可以看到红色框。现在，是否可以让

.parent

（青色）框可滚动，并且

.grandchild

（红色）框同时可见？

编码笔

https://codepen.io/robbymarston/pen/ExJEPAe

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;
}

Answer 1

不幸的是，你不能像这样一起使用

visible

和

scroll

。内容始终被剪切在滚动容器的边缘。