当高度增加时，如何保持弹性项在容器的顶部

<div style="display: flex; flex-direction: column;">
  <div style="flex-grow: 1;">弹性项1</div>
  <div>弹性项2</div>
</div>

<div style="display: grid; grid-template-rows: 1fr auto;">
  <div>弹性项1</div>
  <div>弹性项2</div>
</div>

<div id="container">
  <div class="flex-item">弹性项1</div>
  <div class="flex-item">弹性项2</div>
</div>

<script>
  window.addEventListener('resize', function() {
    var containerHeight = document.getElementById('container').offsetHeight;
    var flexItems = document.getElementsByClassName('flex-item');
    var totalFlexItemsHeight = 0;
    for (var i = 0; i < flexItems.length; i++) {
      totalFlexItemsHeight += flexItems[i].offsetHeight;
    }
    var remainingHeight = containerHeight - totalFlexItemsHeight;
    var topMargin = remainingHeight > 0 ? remainingHeight : 0;
    for (var i = 0; i < flexItems.length; i++) {
      flexItems[i].style.marginTop = topMargin + 'px';
    }
  });
</script>