如何实现一种页面布局？

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