div 的背景不随内容滚动

Question

我有下面的 html 片段，它形成了一个 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 只是拉伸了其父级的宽度，而 scrolling/overflow 不知何故是 "faked"。

为什么会这样？

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

Answer 1

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

.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%;} 以防万一您希望背景全宽，即使每行的文字较少。

div 的背景不随内容滚动

Background of div does not scroll with the contents

html

css

listbox

overflow

flexbox