Javascript 如何提出溢出自动内的div元素？

我有一个场景，我需要自动溢出滚动条，但我希望其中的一个元素弹出。我做了一个演示，展示了我目前得到的东西。我希望那个蓝色的盒子不要在我的主容器上仍然有自动溢出功能的情况下被切断

我只能通过使蓝色框的位置固定才能使它工作，但这样我就无法将它与我的红色div对齐

如何做到这一点

html，
身体{
填充：0；
利润率：25px0；
字体系列：-苹果系统、BlinkMacSystemFont、Segoe UI、机器人、氧气、Ubuntu、Cantarell、Fira Sans、Droid Sans、，
Helvetica Neue，无衬线；
文本对齐：居中；
背景#091c32；
颜色：#fff；
}
.卷轴{
边框：5px实心#000；
填充：0 10px；
最大宽度：250px；
保证金：0自动；
最大高度：400px；
溢出：自动；
}
.盒子{
位置：相对位置；
宽度：100%；
身高：205px；
边框：2倍实心#000；
背景：红色；
利润率：10px0；
}
.innerBox{
位置：绝对位置；
宽度：150px；
高度：50px；
边框：2倍实心#fff；
背景：蓝色；
排名：0；
左：0；
转换：翻译（-50%，-50%）；
z指数：1000；
}

你好
世界

如果需要，这里有一个可用的解决方案

constscrollbox=document.querySelector（'.scroll'）；
const-box=document.queryselectoral（'.innerBox'）；
scrollBox.addEventListener（'scroll'，e=>{
box.forEach（box=>{
const top=box.parentElement.offsetTop；
常数bHH=box.offsetHeight/2；
box.style.top=`${top-e.target.scrollTop+bHH}px`；
});
});
html，
身体{
填充：0 25px；
保证金：0；
字体系列：-苹果系统、BlinkMacSystemFont、Segoe UI、Roboto、Oxygen、Ubuntu、Cantarell、Fira Sans、Droid Sans、Helvetica Neue、Sans serif；
文本对齐：居中；
背景#091c32；
颜色：#fff；
}
.集装箱{
溢出：隐藏；
位置：相对位置；
}
.卷轴{
边框：5px实心#000；
填充：0 10px；
最大宽度：250px；
保证金：0自动；
最大高度：400px；
溢出：自动；
}
.盒子{
宽度：100%；
身高：205px；
边框：2倍实心#000；
背景：红色；
利润率：10px0；
}
.innerBox{
位置：绝对位置；
宽度：150px；
高度：50px；
边框：2倍实心#fff；
背景：蓝色；
转换：翻译（-50%，-50%）；
}
Lorem Ipsum
你好
世界
你好
世界
Lorem ipsum dolor sit amet，是一位杰出的献身者。Aliquam non-dapibus risus。
不要将蓝色
div
元素嵌套在
滚动
元素中。把它们放在你想要的地方。有一个相关的下拉菜单，我相信你可以对你的案例进行反向工程。他们使用JS解决了chazsolo链接的文章中的问题。这在纯CSS中是不可能的。使用JS您可以做到，但正如您所看到的，将有更多的问题需要解决。在小提琴中，蓝色框的父对象是静态定位的，这使得
body
成为蓝色框的偏移父对象。在您明确设置位置之前，该位置仍将相对于其真实父对象。JS part设置垂直位置，但水平位置不被触碰，并且固定在父对象上。谢谢@Teemu，这帮了大忙！