Flexy布局调整滞后

Question

我创建了一个灵活的布局，可以将图像保存在两列中，这样图像就不会失真，并且总是垂直填充该区域，而不会强制重写：

    * {
  box-sizing: border-box;
}
.red {
  background: #faa;
}
.blue {
  background: #aaf;
}
.green {
  background: #afa;
}
.large_container {
    width: 70%;
    display: flex;
    flex-direction: row;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    flex-flow: row nowrap;
    align-items: center;
    height: 80%;
}

.image {
    height: 100%;
}

.img-container {
    flex-basis: auto;
    flex-grow: 1;
    flex-shrink: 1;
    height: 100%;
}

.text_container {
    flex-basis: 100%;
    flex-grow: 1;
    height: 100%;
    overflow-y: scroll;
}

body {
    height: 1000vh;
    width: 100vw;
    margin: 0;
}

<div class="red large_container">
  <div class="blue small_margin img-container">

    
    <img class="image" src="http://via.placeholder.com/600x850"/>
  </div>
  <div class="green text_container">
        <h1>This div Resizes</h1>
    <p>Best viewed fullscreen, there are also iframe-related loading bugs on the relayout</p>
    <p>This is not good :(</p>  
  </div>
</div>

布局完全按预期工作，静态。当页面调整大小时，chrome布局引擎“滞后”并且通常会做各种奇怪的事情：

从全屏缩小时尤其明显，在弹性箱计算后出现图像大小调整并出现蓝色背景。

任何方式从javascript触发弹性重新布局，直到修复了Chrome错误？