如何实现一种页面布局？

紫色框为父DIV 宽度100%
红色div中的内容通过javascript填充
蓝色框的内容也会通过javascript填充

现在希望实现：

红色在不断填充内容的时候高度增长，蓝色框的高度始终等于红色框
紫色框的高度由红色框决定
当蓝色框内容填充从超过红色框高度的时候 可以滚动

求解决的思路？

---

html

<div class="container">
  <div class="content">
  </div>
  <div class="side">
  </div>
</div>

scss

.container{
  width: 100%;
  height: auto;
  border: 5px solid purple;
  padding: 20px;
  display: flex;
  flex-derection: row;
  box-sizing: border-box;
  position: relative;
  .content{
    border: 5px solid steelblue;
    box-sizing: border-box;
    flex: 1;
    height: 500px;
  }
  .side{
    width: 400px;
    border: 5px solid red;
    box-sizing: border-box;
    margin-left: 10px;
  }
}

---

之前的内容没有注意到右侧超出滚动的问题，是个小失误，更新下代码，之前的不删，作为比对，这里面注意运用到绝对定位的特性

.container{
  width: 100%;
  height: auto;
  border: 5px solid purple;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
  .content{
    width: calc(100% - 410px);
    border: 5px solid steelblue;
    box-sizing: border-box;
  }
  
  .side{
    width: 400px;
    height: calc(100% - 40px);
    position: absolute;
    right: 0;
    top: 0;
    margin: 20px 10px;
    border: 5px solid red;
    box-sizing: border-box;
    overflow-y: scroll;
  }
}

---

既然内容都是通过javascript填充，那么给右边的设个overflow:scroll，然后每次填充完内容获取一下左边的高度，然后给右边设置同样的高度就好了。