Html CSS溢出滚动，同时可见

我有可滚动的div和child div。有没有办法显示整个child（也在可滚动div之外）？现在，

overflow-x:scroll

类似于带有滚动条的

overflow-x:hidden

。我想要

overflow-x:visible

带滚动条。这是

.container{
保证金：0自动；
溢出-x：滚动；
宽度：300px；
}
.孩子{
背景图像：线性渐变（向左、蓝色、绿色）；
高度：100px；
宽度：600px；
}
.容器示例{
背景图像：线性渐变（向左、蓝色、绿色）；
保证金：0自动；
溢出x：可见；
宽度：600px；
}
.儿童榜样{
边框：1px纯红；
高度：100px；
保证金：0自动；
宽度：300px；
}

现在：
我想要的（红色边框应该是可滚动的div）：

您可以在此处使用一些js来克隆子元素，然后使用

容器上的
滚动事件来计算水平滚动，并使用相同的值来偏移克隆元素的位置


const container=$（“.container”）
const child=container.find（'.child'）；
const clone=child.clone（）；
常数边界=4；
clone.addClass（'clone'）；
addClass（'transparent'）；
css（'border-width'，border）；
容器。之前（克隆）
$（“.container”）.on（'scroll'，function（）{
常量偏移量=$（this）.scrollLeft（）-border；
clone.css({
左：-偏移量
})
})
正文{
溢出x：隐藏；
}
.集装箱{
保证金：0自动；
溢出-x：滚动；
宽度：300px；
边框：纯红；
z指数：10；
}
.包装纸{
保证金：0自动；
宽度：300px；
位置：相对位置；
}
.孩子{
背景图像：线性渐变（向左、蓝色、绿色）；
高度：100px；
宽度：600px；
位置：相对位置；
}
.克隆{
位置：绝对位置；
z指数：-1；
左：0；
排名：0；
}
.透明{
背景：透明；
}
您希望此红色div可以移动吗？