Css 当改变屏幕宽度时，如何使一个绝对定位的元素在另一个元素之前结束？

让我们假设我们有一个“父”块，它由很多元素组成，包括一个按钮。通过按下此按钮，用户应看到一个“滑动”元素，该元素将覆盖父块而不是整个宽度，但仅覆盖到按钮本身（您将在笔上看到的块1和块2）。因此，幻灯片应该永远在按钮之前结束。即使屏幕的宽度改变了。如何实施

1.
2.
按钮
3.
你好
.家长{
显示器：flex；
}
.第一，.第二，.第三{
填充：30px；
}
.首先{
背景颜色：鲑鱼；
弹性基础：120px；
}
.第二{
背景颜色：黄色；
弹性增长：1
}
.第三{
背景色：#56D7F7；
弹性增长：1
}
.btn{
背景色：红色；
光标：指针；
}
.幻灯片{
位置：绝对位置；
左：0
}

您可以通过一些Javascript应用CSS样式来实现这一点。要打开幻灯片，请按计算的数量放大幻灯片；要关闭，只需将其缩放回原始大小

您可能不想缩放幻灯片元素，因为如果其中有任何内容，则会显示有点歪斜，但将此解决方案改为使用翻译并没有太多工作

我不认为有一个纯粹的CSS解决方案，因为你必须计算按钮的位置，但当然我可能是错的

let open=false；
slide.style.setProperty（'transform-origin'，'left-top'）；
slide.style.setProperty（'transition'，'linear.4s all'）；
addEventListener（'单击'，（事件）=>{
如果（打开）{
slide.style.setProperty（'transform'，'scaleX（1）`）；
开=假；
}否则{
const first=slide.offsetWidth；
const last=button.offsetLeft；
常量刻度=最后一个/第一个；
slide.style.setProperty（'transform'，'scaleX（${scale}）`）；
开放=真实；
}
})

.parent{
显示器：flex；
位置：相对位置；
}
.首先，
第二
.第三{
填充：30px；
}
.首先{
背景颜色：鲑鱼；
弹性基础：120px；
}
.第二{
背景颜色：黄色；
弹性增长：1
}
.第三{
背景色：#56D7F7；
弹性增长：1
}
.btn{
背景色：红色；
光标：指针；
}
.幻灯片{
位置：绝对位置；
背景颜色：绿色；
宽度：40px；
左：0；
排名：0；
底部：0；
}

1.
2.
按钮
3.

如果您希望您的div覆盖另外两个div，并且其中一个具有flex的动态宽度，我建议使用JS解决方案。会有问题吗？

<div class='parent'>
 <div class='first'>1</div>
 <div class='second'>2</div>
 <div class='btn'>Button</div>
 <div class='third'>3</div>

   <div class='slide'>
       Hello 
   </div>
</div>

 .parent {
    display: flex; 
}

 .first, .second, .third {
    padding: 30px;
}

 .first {
   background-color: salmon;
   flex-basis: 120px;
}

 .second {
   background-color: yellow;
   flex-grow: 1
}

.third {
   background-color: #56D7F7;
   flex-grow: 1
}

.btn {
   background-color: red;
   cursor: pointer;
}

.slide {
  position: absolute;
  left: 0
}