html - 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 只拉伸(stretch)其父级的宽度，而滚动/溢出的东西不知何故是“伪造的”。

为什么会这样？

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

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>

说明:默认情况下， block 级元素不会超过容器的 100% 宽度，但是如果可用，内联 block 将扩展到内容长度，例如在一个可滚动的容器中。

同时申请.items {min-width: 100%;}如果您希望背景全宽，即使每行中的文字较少。