html - 当容器滚动时，如何让子 div 使用所有可用空间？

Question

我有几个像这样的div:

.item {
  white-space: nowrap;
}
.item:hover {
  background-color: #DDDDDD;
}
.container {
  max-width: 200px;
  overflow: auto;
}

<div class="container">
  <div class="item">somewhat short item 1</div>
  <div class="item">somewhat short item 2</div>
  <div class="item">somewhat short item 3</div>
  <div class="item">very long item that makes the container scroll</div>
  <div class="item">somewhat short item 4</div>
  <div class="item">somewhat short item 5</div>
  <div class="item">somewhat short item 6</div>
  <div class="item">somewhat short item 7</div>
</div>

较长的 div 使容器滚动，因为它应该。然而，因为容器的宽度没有增加，悬停在滚动开始的地方被切断:

我希望所有的 div 都延伸到可滚动区域的末尾，这样悬停就不会像那样被切断。

我该怎么做？

Answer 1

容器上的display:grid就可以了

.item {
  white-space: nowrap;
}
.item:hover {
  background-color: #DDDDDD;
}
.container {
  max-width: 200px;
  overflow: auto;
  display:grid;
}

<div class="container">
  <div class="item">somewhat short item 1</div>
  <div class="item">somewhat short item 2</div>
  <div class="item">somewhat short item 3</div>
  <div class="item">very long item that makes the container scroll</div>
  <div class="item">somewhat short item 4</div>
  <div class="item">somewhat short item 5</div>
  <div class="item">somewhat short item 6</div>
  <div class="item">somewhat short item 7</div>
</div>