html - How to make child divs use all available space when one makes the container scroll?

Question

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>

Answer 1

display:grid on the container can do it

.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>