Прокрутите до конца элемента, если он не полностью виден

Question

У меня есть родительский контейнер с большим количеством divs в качестве дочерних элементов.

Родительский контейнер имеет горизонтальную прокрутку.

Как я могу onclick прокрутить до конца дочернего div, если он полностью не виден?

Он должен работать в обоих направлениях.

JS/JQuery/CSS

Пример здесь: https://jsfiddle.net/04mzhagr/

.parent{ 
 
     width:100%; 
 
     white-space: nowrap; 
 
     overflow-y: hidden; 
 
     overflow-x: scroll; 
 
    } 
 
    .child{ 
 
     display:inline-block; 
 
     padding:10%; 
 
     background-color:blue; 
 
     margin:10px; 
 
    }

<div class='parent'> 
 
     <div class='child'> test</div> 
 
     <div class='child'> test</div> 
 
     <div class='child'> test</div> 
 
     <div class='child'> test</div> 
 
     <div class='child'> test</div> 
 
     <div class='child'> test</div> 
 
     <div class='child'> test</div> 
 
     <div class='child'> test</div> 
 
     <div class='child'> test</div> 
 
     <div class='child'> test</div> 
 
     <div class='child'> test</div> 
 
     <div class='child'> test</div> 
 
     <div class='child'> test</div> 
 
     <div class='child'> test</div> 
 
     <div class='child'> test</div> 
 
     <div class='child'> test</div> 
 
     <div class='child'> test</div> 
 
     <div class='child'> test</div> 
 
     <div class='child'> test</div> 
 
     <div class='child'> test</div> 
 
     <div class='child'> test</div> 
 
     <div class='child'> test</div> 
 
     <div class='child'> test</div> 
 
     <div class='child'> test</div> 
 
     <div class='child'> test</div> 
 
    </div>

Answer 1

<div id='parent' class='parent'> 
    <div class='child'> test</div> 
    <div class='child'> test</div> 
    <div class='child'> test</div> 
    <div class='child'> test</div> 
</div> 

<script> 
    var parent = document.getElementById("parent"); 
    parent.scrollLeft = parent.scrollWidth; 
</script> 

https://jsfiddle.net/bendela6/v7609Lw0/