null

body {
  position: relative;
}

.test {
  position: absolute;
  top: 10px;
  left: 10px;
  height: 200px;
  border: 1px solid #ccc;
  overflow-y: auto;
  overflow-x: hidden;
  white-space: nowrap;
}

.wrap {
  display: inline-block;
}

.item {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}
.item:last-child {
  border-bottom: none;
}

<div class="test">
  <div class="wrap">
    <div class="item">Some</div>
    <div class="item">Larger amount</div>
    <div class="item">of text</div>
    <div class="item">should go in</div>
    <div class="item">these items to prove</div>
    <div class="item">that this thing is gonna grow to whatever</div>
    <div class="item">to whatever</div>
    <div class="item">it needs to</div>
  </div>
</div>

null

问题是，当垂直滚动条出现时，绝对位置的div没有相应地增长，最长项上的一些内容被切断。如果我把'overflow-x：hidden‘去掉，就会出现一个水平滚动条，这也不是我想要的。

当'white-space:nowrap'被移除时，一切看起来都很好，但我希望每个项目都是一行。有没有办法让绝对定位的div根据“white-space:nowrap”元素的宽度增长？