Flex布局下同级Div元素尺寸调整滚动异常问题求助

这是Chrome浏览器特有的问题，是我们在Electron应用中遇到的问题简化版本。这并非常规Bug，更可能是对Flexbox调整内容与滚动定位的机制存在理解偏差，特此求助有没有开发者碰到过类似问题并找到了解决方案。

Problem Details #

父级容器使用flex-direction: column布局，包含两个子元素：

• 顶部子元素设置flex:1，占据容器剩余空间并开启垂直滚动
• 底部子元素为可伸缩的操作栏

当底部子元素高度增加时，顶部滚动容器的内容没有被正确向上推送，导致滚动位置出现异常。

Reproduction Steps #

• 滚动顶部内容容器到最底部
• 点击「increase height」按钮，会发现滚动条不再停留在底部位置
• 多次点击「increase height」按钮，观察滚动位置的变化
• 将顶部内容容器重新滚动回底部
• 点击「decrease height」按钮，直到底部栏回到最小高度
• 再次点击「increase height」按钮，此时高度增加会向上推送内容，但只会推送到上次滚动到底部的位置

Sample Code #

HTML #

<div class='container'>
  <div class='content'>
    <div> askldjfaslkdjflasdjflkasjdflkjasdlfjaslkdf </div>
    <div> askldjfaslkdjflasdjflkasjdflkjasdlfjaslkdf </div>
    <div> askldjfaslkdjflasdjflkasjdflkjasdlfjaslkdf </div>
    <div> askldjfaslkdjflasdjflkasjdflkjasdlfjaslkdf </div>
    <div> askldjfaslkdjflasdjflkasjdflkjasdlfjaslkdf </div>
    <div> askldjfaslkdjflasdjflkasjdflkjasdlfjaslkdf </div>
    <div> askldjfaslkdjflasdjflkasjdflkjasdlfjaslkdf </div>
    <div> askldjfaslkdjflasdjflkasjdflkjasdlfjaslkdf </div>
    <div> askldjfaslkdjflasdjflkasjdflkjasdlfjaslkdf </div>
    <div> askldjfaslkdjflasdjflkasjdflkjasdlfjaslkdf </div>
    <div> askldjfaslkdjflasdjflkasjdflkjasdlfjaslkdf </div>
    <div> askldjfaslkdjflasdjflkasjdflkjasdlfjaslkdf </div>
    <div> askldjfaslkdjflasdjflkasjdflkjasdlfjaslkdf </div>
    <div> askldjfaslkdjflasdjflkasjdflkjasdlfjaslkdf </div>
    <div> askldjfaslkdjflasdjflkasjdflkjasdlfjaslkdf </div>
    <div> askldjfaslkdjflasdjflkasjdflkjasdlfjaslkdf </div>
    <div> askldjfaslkdjflasdjflkasjdflkjasdlfjaslkdf </div>
    <div> askldjfaslkdjflasdjflkasjdflkjasdlfjaslkdf </div>
    <div> askldjfaslkdjflasdjflkasjdflkjasdlfjaslkdf </div>
    <div> askldjfaslkdjflasdjflkasjdflkjasdlfjaslkdf </div>
    <div> askldjfaslkdjflasdjflkasjdflkjasdlfjaslkdf </div>
    <div> askldjfaslkdjflasdjflkasjdflkjasdlfjaslkdf </div>
    <div> askldjfaslkdjflasdjflkasjdflkjasdlfjaslkdf </div>
    <div> askldjfaslkdjflasdjflkasjdflkjasdlfjaslkdf </div>
    <div> askldjfaslkdjflasdjflkasjdflkjasdlfjaslkdf </div>
    <div> askldjfaslkdjflasdjflkasjdflkjasdlfjaslkdf </div>
    <div> askldjfaslkdjflasdjflkasjdflkjasdlfjaslkdf </div>
    <div> askldjfaslkdjflasdjflkasjdflkjasdlfjaslkdf </div>
    <div> askldjfaslkdjflasdjflkasjdflkjasdlfjaslkdf </div>
    <div> askldjfaslkdjflasdjflkasjdflkjasdlfjaslkdf </div>
    <div> askldjfaslkdjflasdjflkasjdflkjasdlfjaslkdf </div>
    <div> askldjfaslkdjflasdjflkasjdflkjasdlfjaslkdf </div>
    <div> askldjfaslkdjflasdjflkasjdflkjasdlfjaslkdf </div>
    <div> askldjfaslkdjflasdjflkasjdflkjasdlfjaslkdf </div>
    <div> askldjfaslkdjflasdjflkasjdflkjasdlfjaslkdf </div>
  </div>
  <div class='footer' id="footer">
    <button onclick="increaseHeight()"> increase height </button>
    <button onclick="decreaseHeight()"> decrease height </button>
  </div>
</div>
<script>
function increaseHeight () {
  var el = document.getElementById("footer");
  var height = el.offsetHeight;
  el.style.height = (height + 10) + 'px';
}
function decreaseHeight () {
  var el = document.getElementById("footer");
  var height = el.offsetHeight;
  el.style.height = (height - 10) + 'px';
}
</script>

CSS #

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
body {
  padding: 10px;
}
* {
  box-sizing: border-box;
}
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid black;
}
.content {
  flex: 1;
  overflow-y: scroll;
  div {
    padding: 10px;
    display: block;
    width: 100%;
  }
}
.footer {
  display: flex;
  flex: 0 1 auto;
  min-height: 40px;
}

内容的提问来源于stack exchange，提问作者topched