我有一個容器，有兩個子容器，一個頭和一個內容。我希望兩個孩子都占用容器中的所有可用空間，即使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>

然而，標題沒有占據寬度上的所有可用空間，并且標題2是可見的，盡管它應該被溢出滾動隱藏。此外，標題和內容背景不會覆蓋所有可用空間。

我怎樣才能讓兩個孩子都占據所有可用空間，甚至溢出，并讓背景擴展到所有可用空間？

提前感謝您的幫助！

https://jsfiddle.net/r2m1ne53/3/

可以設置。容器{顯示:網格；}:

.container {
  display: grid;
  overflow: auto;
  width: 500px;
  border: 1px solid black;
}

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

.content {
  background: green; 
}

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