Css 相对于父div水平滚动的粘性子div

我在父div内的child div sticky中遇到一些问题。父div有两个子div。child2的高度超出了父div的高度。因此，我添加了父div的滚动。现在的问题是，我想使子1 div变为粘性，当我使子1变为粘性时，该div的宽度将超出父div。child1应该进入父div内部，并能够水平滚动父div

.parent {
  width:250px;
  height:250px;
  background-color:#CCCCCC;
  position:relative;
  overflow:scroll;
}

.child1 {
  width:500px;
  height:50px;
  background-color:#4285F4;
  position:fixed;

}
.child2 {
  height:500px;
  width: 600px;

}

<div class="parent">
   <div class="child1"></div>
    <div class="child2"></div>
</div>

.parent{
宽度：250px；
高度：250px；
背景色：#中交；
位置：相对位置；
溢出：滚动；
}
.儿童1{
宽度：500px；
高度：50px；
背景色：#4285F4；
位置：固定；
}
.儿童2{
高度：500px；
宽度：600px；
}

任何帮助都将不胜感激

更新

---

确切的问题是，当我将child2的宽度设为500px时，我能够水平滚动。但是child1正在移出父div，并且内容正在显示。

为什么不给您的child1一个适合父div的定义宽度，这样您仍然可以使用fixed as positioning

---

请看

谢谢大家的支持。我通过添加以下Jquery代码解决了这个问题，并将child1设置为position:absolute

$(document).ready(function(){
  $(".parent").scroll(function(){
    console.log("scorled");
$(".child1").css("top", $(".parent").scrollTop() + "px");
 });
});

---

子2有一个固定的位置，这意味着它相对于窗口，而不是父div。两个子div仅相对于父div。Child1应该在父项中是粘性的。请阅读此处的定位。如果已修复，您希望如何看到带有水平滚动条的

.Child1

的右侧？可能与