无法获得一个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

您可以将display的{​​{1}}与.wrapper一起grid来“粘合”它们的 item ：

grid-auto-rows: min-content

.wrapper {
  display: grid;
  grid-auto-rows: min-content; /* or: "align-content: start" */
  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;
}

Answer 2

问题是您设置了.header { width: 100% }并获得了其父宽度300px。

您可以将类设置为所需的宽度，并将其设置为您想要比父级更宽的元素。

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

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

Answer 3

您可以尝试对内容使用包装器，并将滚动条设置为该包装器，以防止header滚动。
还要注意content-wrapper的高度： 100％height-标头高度

.wrapper {
  width: 300px;
  height: 200px;
  position: relative;
  background-color: gray;
}

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

.content-wrapper {
  width: 100%;
  overflow: auto;
  height: calc(100% - 30px);
}

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

<div class="wrapper">
  <div class="header">
    Header
  </div>
  <div class="content-wrapper">
    <div class="content">
      Content Content Content Content Content Content Content Content Content Content Content Content Content Content
    </div>
  </div>
</div>

Answer 4

似乎解决方案是在包装器内部添加一个内部包装器，其中包含标题和内容，并将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>