Przyklejony div dziecka względem przewijania poziomego div rodzica - css, html, sticky

Mam pewne problemy z div dzieci dzieckowewnątrz div rodzica. Div rodzic posiadający dwa div dzieci. child2 height wykracza poza wysokość div rodziców. Dodałem więc scroll dla div rodzica. Teraz problem polega na tym, że chcę, aby dziecko 1 div było lepkie, gdy sprawię, że dziecko 1 będzie lepkie, a szerokość tego elementu div wyjdzie z div rodzica. Dziecko 1 powinno wejść do div jednostki nadrzędnej i być w stanie przewijać poziomo 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>

Każda pomoc będzie głęboko doceniona.

Aktualizacja Dokładny problem polega na tym, że kiedy podaję szerokość dziecka2 jako 500px, mogę przewijać w poziomie. Ale element potomny 1 wychodzi z elementu nadrzędnego, a zawartość jest wyświetlana.

Odpowiedzi:

Dlaczego nie dajesz dziecku1 określonej szerokości, która pasuje do rodzica, w ten sposób możesz nadal używać ustalonej pozycji?

Zobacz PRÓBNY

Dzięki za wsparcie. Rozwiązałem problem, dodając następujący kod Jquery i czyniłem dziecko1 jako pozycja: absolutna

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