当使容器滚动时，如何使子div使用所有可用空间? [英] How to make child divs use all available space when one makes the container scroll?

问题描述

我有一些这样的div:

I have a few divs like so:

.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使容器滚动，如它应该的那样.但是，由于容器的宽度没有增加，所以悬停在滚动开始的位置被切断:

The longer div makes the container scroll, as it should. However, because the width of the container is not increased, the hover is cut off at the point where the scrolling started:

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

I would like all divs to extend to the end of the scrollable area, so that the hover is not cut off like that.

我该怎么做?

推荐答案

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>

这篇关于当使容器滚动时，如何使子div使用所有可用空间?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！