Issues with resizing divs that are siblings and flex box

Question

This is specific to chrome since this is a simplification of a problem we are facing inside an electron app.

This isn't a normal bug but maybe a misunderstanding of how flex-box resizes content and scroll positioning. I am wondering if anyone has encountered this issue before and has a solution.

The issue is that I have a parent div that is flex-direction column that contains 2 children. First sibling is flex 1 to take up the space, and the second sibling can grow and shrink. When the bottom sibling grows the top siblings content isn't pushed properly.

Steps to reproduce:

1. Scroll to the bottom of the top div
2. Click on the "increase height" button. Notice that the scrollbar is no longer at the bottom
3. Click the "increase height" button a few more times
4. Scroll the top div to the bottom
5. Click the "decrease height" button till it is back to the min-height
6. Click the "increase height" button. Notice that now the height increase is actually pushing the content up. It will continues to push the content up until the place where you last scrolled down

Here is a fiddle of it: https://jsfiddle.net/wzqbkLx4/ Below is the code from the fiddle

sample.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>
        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>

sample.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;
}