Липкий дочерний div относительно родительского div горизонтальная прокрутка

Question

У меня есть некоторые проблемы с дочерним элементом div внутри родительского элемента div. Родительский div, имеющий два дочерних div. высота child2 выходит за пределы высоты родительского элемента div. Поэтому я добавил свиток для родительского div. Теперь проблема заключается в том, что я хочу сделать дочерний элемент 1 как липкий, когда я делаю дочерний элемент 1 таким же липким, ширина этого блока выходит за пределы родительского элемента 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>

Любая помощь будет высоко ценится.

Обновить точную проблему, когда я даю ширину для child2 как 500px, я могу прокрутить горизонтально. Но child 1 выходит из родительского div, и содержимое отображается.

Answer 1

Спасибо за вашу поддержку, ребята. Я решил проблему, добавив следующий код Jquery и сделав child1 позицией: absolute

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

Answer 2

Почему бы вам не дать вашему child1 определенную ширину, подходящую для родителя, так что вы все равно можете использовать фиксированный как позиционирование?

Смотрите ДЕМО