当兄弟 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>