Css 带溢出的固定高度div会导致内容的包装

我有一张固定高度的子弹清单。宽度是动态的，由div的内容决定，在本例中，div是一个项目符号列表。溢出设置为自动，因此当使用较长的列表时，它会向div添加一个滚动条

问题是，当它添加滚动条时，列表项不再适合相同的内容，它会导致较长的项目被包装，通常它们会硬放在右边距中

这里的小提琴示例：

如果将div的高度更改为250px，则列表会很好地显示出来，每行一个，没有换行，但是将高度设置为150px，由于添加了滚动条，长行现在会换行

是否有办法解释滚动条的潜在存在，并添加填充/边距/任何东西来阻止任何不必要的包装发生

---

请注意，空格：nowrap不是一个选项，div应该根据内容根据需要尽可能宽，但如果需要，仍然允许包装非常长的行，以防某些行非常非常长

我有一些可能性，但它们都有缺点，所以我想有些人会找到更好的答案：

您可以通过-y:滚动；到分部去。滚动条将始终在这里，但只是变灰了

添加一些填充物以补偿滚动条占用的空间

我认为这是最好的解决方案：下载。它是一个jQuery插件，不会影响原始设计布局。如果您可以使用JavaScript和jQuery，这是我拥有的最好的解决方案

---

添加空白：nowrap；按照你的包装规则。这将强制文本在同一行上。但是，文本可能会被滚动条遮住，如@jenova70所示，您可能需要正确添加填充。不能使用nowrap，因为如果某些行的长度超过屏幕/空间的宽度，则可能需要换行。我只是希望div在添加滚动条时变得更胖，而不是压缩内容。遗憾的是，滚动条似乎没有占用填充/边距提供的空间。对永久滚动条也不太感兴趣：那么完美滚动条呢？这真的很小

#wrap {
  height: 150px;
  border: 1px solid #ff0000;
  overflow: auto;
  display: inline-block;
}

<div id="wrap">
<ul>
    <li>short list item 1</li>
    <li>short list item 2</li>
    <li>short list item 3</li>
    <li>this list item longer</li>
    <li>short list item</li>
    <li>short list item</li>
    <li>short list item</li>
</ul>
</div>