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

基本上，我正在尝试建立聊天。父级的内部是两个孩子divs：顶部是可滚动的（用于显示消息），而底部是用于键入您的消息发送。

我正在使用Flex盒来控制高度，以使两个孩子一起分配始终等于父级的高度。底部的儿童div必须根据内容（我已经做过）扩展或收缩，而顶级儿童DIV根据底部儿童Div的高度扩展或收缩（我也做过）。

问题在于，我还希望Top Div随着其高度的变化而保持其滚动位置。如果我滚动到顶级儿童Div的底部并看到" Hello"，我仍然希望看到" Hello"，因为我在底部的Div中输入几行。但是，取而代之的是，除非我手动滚动显示它。

我希望这已经足够清楚了，但是如果不是，我可以尝试以其他方式解释。

我希望我的答案在CSS（或CSS3）中，但是如果不可能，jQuery或Pure 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>