我如何获得一个绝对定位的div溢出自动增长到其内容的宽度，空白设置为nowrap？

Question

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”元素的宽度增长？

Answer 1

我想这就是你想要的

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;
    padding-right:28px;
}
.item:last-child {
    border-bottom: none;
}

html prettyprint-override"><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>