我有一个容器，它有两个孩子，一个header和一个content。我希望两个子元素都占用容器中的所有可用空间，即使content中的内容溢出并导致滚动。此外，我希望header和content背景扩展到所有可用空间。
下面是我尝试过的HTML和CSS代码：

<div class="container">
  <div class="header">
    <span>header1</span>
    <span>header2</span>
  </div>
  <div class="content">
    contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
  </div>
</div>

<style>
  .container { 
    display: flex;
    flex-direction: column;
    overflow: auto;
    width: 500px;
    border: 1px solid black;
  }

  .header {
    background: red;
    display: flex;
    justify-content: space-between; 
  }

  .content {
    background: green; 
  } 
</style>

然而，标题并没有占用宽度上的所有可用空间，并且header 2是可见的，即使它应该被溢出滚动条隐藏。此外，标题和内容背景不会扩展到所有可用空间。
我怎样才能让两个孩子占用所有可用的空间，即使有溢出，并使背景扩展到所有可用的空间？
提前感谢您的帮助！
https://jsfiddle.net/r2m1ne53/3/