无法让 div 填充其容器可滚动宽度

Question

我有一个包装宽度固定宽度 - 300px；我有一个孩子，内容，宽度宽度 600px - 导致容器滚动。我有另一个孩子，标题，我想拉伸包装纸的整个宽度。我说宽度 100% - 但我只得到 300px。我希望它达到 600px（包装器的完整可滚动宽度）

我也许可以用 Flex 解决这个问题，但我想知道是否还有其他方法。

这是我的问题的屏幕截图：

我怎么做？

.wrapper{
  width:300px;
  height:300px;
  overflow:auto;
  background-color:gray;
}
.header{
  background-color:red;
  width:100%;
  height:30px;
}
.content{
  height:100px;
  width:600px;
  background-color:yellow;
}

<div class="wrapper">
  <div class="header">
  
  </div>
  <div class="content">
  
  </div>
</div>

Answer 1

看来解决方案是在包装器内部添加一个内部包装器，其中包含标题和内容，并将其设置inner-wrapper为display:inline-block

.wrapper {
  width: 300px;
  height: 300px;
  overflow: auto;
  background-color: gray;
}

.inner-wrapper {
  display: inline-block;
}

.header {
  background-color: red;
  width: 100%;
  height: 30px;
}

.content {
  height: 100px;
  width: 600px;
  background-color: yellow;
}

<div class="wrapper">
  <div class="inner-wrapper">
    <div class="header">

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

    </div>
  </div>
</div>