在div中保持滾動位置，因爲兄弟div縮小或擴大？

Question

這是我目前有： https://jsfiddle.net/Lt4cmfbo/

CSS

.parent { 
    position: relative; 
    float: none; 
    height: 400px; 
    width: auto; 
    background: purple; 
    overflow: hidden; 
    display: flex; 
    flex-direction: column; 
} 

.childOne { 
    background: blue; 
    width: 100%; 
    height: auto; 
    overflow-y: auto; 
    flex-grow: 1; 
} 

.childTwo { 
    background: red; 
} 

.input-chat { 
    background-color: white; 
    margin: 5px auto; 
    border: solid 1px #000; 
    min-height:10px; 
    max-height: 100px; 
    overflow: auto; 
    width: 95%; 
} 

HTML

<div class="parent"> 
    <div class="childOne"> 
    <p> 
     content #1 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     hello 
    </p> 
    </div> 
    <div class="childTwo"> 
     <div class="input-chat" contentEditable="true"></div> 
    </div> 
</div> 

基本上，我試圖建立一個聊天。父div的內部是兩個子div：最上面的一個是可滾動的（用於顯示消息），最下面的是輸入消息發送。

我使用柔性框來控制高度，以便兩個子div總是等於父div高度。底部子div必須根據內容（我已經完成）擴展或縮小，而頂級子div根據底部子div的高度（我也已完成）擴展或縮小。

問題是，我也希望頂部div保持其高度變化的滾動位置。如果我滾動到頂部的子div的底部，並看到'你好'，我想仍然看到'你好'，因爲我在底部div中輸入了幾行。但是，相反，底部div似乎隱藏它，除非我手動滾動顯示它。

我希望這已經足夠清楚了，但如果不是，我可以試着用其他方式來解釋它。

我希望我的答案是在CSS（或CSS3），但如果這是不可能的，jQuery或純JavaScript是好的。

Answer 1

設置scrollTop等於scrollHeight：

let c1 = document.querySelector('.childOne'), 
 
    c2 = document.querySelector('.childTwo>div'), 
 
    b = document.querySelector('button'); 
 

 
b.addEventListener(
 
    'click',() => { 
 
    c1.innerHTML += '<br>' + c2.innerHTML; 
 
    c1.scrollTop = c1.scrollHeight; 
 
    c2.innerHTML = ''; 
 
    c2.focus(); 
 
    }, 
 
    false);

.parent { 
 
    position: relative; 
 
    float: none; 
 
    height: 400px; 
 
    width: auto; 
 
    background: purple; 
 
    overflow: hidden; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.childOne { 
 
    background: blue; 
 
    width: 100%; 
 
    height: auto; 
 
    overflow-y: auto; 
 
    flex-grow: 1; 
 
} 
 
.childTwo { 
 
    background: red; 
 
} 
 
.test { 
 
    background-color: white; 
 
    margin: 5px auto; 
 
    border: solid 1px #000; 
 
    min-height: 10px; 
 
    max-height: 100px; 
 
    overflow: auto; 
 
    width: 95%; 
 
}

<div class="parent"> 
 
    <div class="childOne"> 
 
    <p> 
 
     content #1 
 
     <br><br><br><br><br><br><br><br><br> 
 
     <br><br><br><br><br><br><br><br><br> 
 
     <br><br>hello 
 
    </p> 
 
    </div> 
 
    <div class="childTwo"> 
 
    <div class="test" contentEditable="true"></div> 
 
    <button> 
 
     Add</button> 
 
    </div> 
 
</div>