div的背景不随内容滚动答案

【问题标题】：Background of div does not scroll with the contentsdiv的背景不随内容滚动
【发布时间】：2017-05-20 07:43:33
【问题描述】：

我有以下 html 的 sn-p 组成一个 X-Y 可滚动列表框

* {
  font-family: "consolas";
}
.listbox {
  border: 1px solid black;
  padding: 4px;
  width: 150px;
  height: 200px;
  display: flex;
  flex-direction: column;
}
.caption {
  font-weight: bold;
  background-color: #aaf;
  padding: 10px;
}
.content {
  flex-grow: 1;
  overflow: scroll;
}
.item {
  background-color: #ddd;
  padding: 2px;
  padding-left: 6px;
  margin-top: 4px;
  white-space: nowrap;
}

<div class="listbox">
  <div class="caption">Caption</div>
  <div class="content">
    <div class="item">One</div>
    <div class="item">Two</div>
    <div class="item">Three (this has a longer bit)</div>
    <div class="item">Four</div>
    <div class="item">Five</div>
    <div class="item">Six</div>
    <div class="item">Seven</div>
    <div class="item">Eight (so does this)</div>
    <div class="item">Nine</div>
    <div class="item">Ten</div>
  </div>
</div>

它工作正常，但有一个问题，当用户从左向右滚动时，div 的背景似乎被抛在后面。就好像实际的 div 只拉伸了其父级的宽度，而滚动/溢出的东西以某种方式被“伪造”了。

为什么会这样？

我该如何解决这个问题？我想要的行为是让所有项目看起来与最大的项目具有相同的宽度。

【问题讨论】：

标签： html css listbox flexbox overflow

【解决方案1】：

尝试在将其设置为display:inline-block的项目周围添加一个容器<div class="items">。

.items {
  display: inline-block;
}

* {
  font-family: "consolas";
}
.listbox {
  border: 1px solid black;
  padding: 4px;
  width: 150px;
  height: 200px;
  display: flex;
  flex-direction: column;
}
.caption {
  font-weight: bold;
  background-color: #aaf;
  padding: 10px;
}
.content {
  flex-grow: 1;
  overflow: scroll;
}
.items {
  display: inline-block;
}
.item {
  background-color: #ddd;
  padding: 2px;
  padding-left: 6px;
  margin-top: 4px;
  white-space: nowrap;
}

<div class="listbox">
  <div class="caption">Caption</div>
  <div class="content">
    <div class="items">
      <div class="item">One</div>
      <div class="item">Two</div>
      <div class="item">Three (this has a longer bit)</div>
      <div class="item">Four</div>
      <div class="item">Five</div>
      <div class="item">Six</div>
      <div class="item">Seven</div>
      <div class="item">Eight (so does this)</div>
      <div class="item">Nine</div>
      <div class="item">Ten</div>
    </div>
  </div>
</div>

说明：默认情况下，块级元素占用容器的 100% 宽度，但如果可用，内联块将扩展到内容长度，例如在一个可滚动的容器中。

如果您希望背景扩大到全宽，即使每行中的文本较少，也可以应用.items {min-width: 100%;}。

【讨论】：