在悬停时创建一个新的堆栈上下文

Question

我有一个可滚动的元素列表，列表中的每个元素在单击时都有一个跳动的动画（我在悬停时通过 enlargeging 过渡简化了下面的示例）。

如果父容器不可滚动，则不会出现问题，因为overflow-x仅在overflow-y设置为不同于auto或scroll的情况下才能正常工作，如this question中所述。

期望的行为

当动画超出可滚动容器的边界时，它应创建一个新的堆叠上下文并与y轴滚动条重叠。它不应显示水平滚动条。

到目前为止我尝试过的事情

到目前为止，我已经尝试过：

• 悬停时使用position: absolute。这是行不通的，因为我们在一个可滚动的容器中

• 将中间div应用于overflow-x: visible。出于相同原因，它不起作用

我了解到，当用户悬停列表中的某个项目时，如果无法即时创建新的堆栈上下文，我将无法解决此问题。

以下是问题的一个示例：

.scrollable-div {
  width: 250px;
  height: 400px;
  overflow-y: auto;
  border: solid 1px gray;
}

.grow-on-hover {
  width: 90%;
  height: 120px;
  margin: 10px auto;
  background-color: royalblue;
  transition: transform 0.5s ease-in-out;
}
.grow-on-hover:nth-child(odd) {
  background-color: gold;
}

.grow-on-hover:hover {
  transform: scaleX(1.5);
}

<div class="scrollable-div">
  <div class="grow-on-hover"></div>
  <div class="grow-on-hover"></div>
  <div class="grow-on-hover"></div>
  <div class="grow-on-hover"></div>
  <div class="grow-on-hover"></div>
  <div class="grow-on-hover"></div>
</div>

谢谢。

---

修改：

悬停时应发生以下效果：

Answer 1

HTML

<div class="scrollable-div">
  <div class="grow-on-hover"></div>
  <div class="grow-on-hover"></div>
  <div class="grow-on-hover"></div>
  <div class="grow-on-hover"></div>
  <div class="grow-on-hover"></div>
  <div class="grow-on-hover"></div>
</div>

CSS

.scrollable-div {
  width: 250px;
  height: 400px;
  overflow-y: auto;
  border: solid 1px gray;
}

.grow-on-hover {
  width: 90%;
  height: 120px;
  margin: 10px auto;
  background-color: royalblue;
  transition: transform 0.5s ease-in-out;
}
.grow-on-hover:nth-child(odd) {
  background-color: gold;
}

.grow-on-hover:hover {

    transition: all .3s;
}
.grow-on-hover::before {
    content: '';
    background: royalblue;
    width: 250px;
    height: 120px;
    position: absolute;
    left: 9px;
    right: 0;
 opacity: 0;
    visibility: hidden;
}
.grow-on-hover:nth-child(odd)::before {
  background-color: gold;
  content: '';
}

.grow-on-hover:hover::before{
  opacity: 1;
    visibility: visible;
    transition: all .3s;
}

Answer 2

您可以使用此代码

body {
  margin: 0;
}

.scrollable-div {
  width: 250px;
  height: 400px;
  overflow-y: auto;
  padding: 10px;
  border: solid 1px gray;
}

.grow-on-hover {
  width: 210px;
  height: 120px;
  margin: 0 auto 10px;
  background-color: royalblue;
  transition: transform 0.5s ease-in-out;
}

.grow-on-hover:nth-child(odd) {
  background-color: gold;
}

.grow-on-hover:hover {
  transform: scaleX(1.5);
  position: fixed;
  width: 178px;
}

.grow-on-hover:hover+div {
  margin-top: 140px;
}

<div class="scrollable-div">
  <div class="grow-on-hover"></div>
  <div class="grow-on-hover"></div>
  <div class="grow-on-hover"></div>
  <div class="grow-on-hover"></div>
  <div class="grow-on-hover"></div>
  <div class="grow-on-hover"></div>
</div>