Html 需要与侧导航高度匹配的流体元件

我有一个布局我需要一些帮助。我想做的是设计一个布局，其中主要内容是基于窗口大小的100%宽度的流体，但是，固定的左导航与主要内容的高度匹配。我包括了一张图片。将其设置为静态显然很容易。我的问题是，如果我希望它是流动的，我如何实现我想要的

<div class="container">
  <div class="left">
    <p>0</p>
  </div>
  <div class="right">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
  </div>
 </div>

小提琴：

.container {
  position: relative;
}

.left {
  position: absolute;
  left:0;
  top: 0;
  bottom:0;
  width: 20%;
  background-color: pink;
}

.right {
  margin-left: 20%;
  background-color: blue;
}