使用滚动条正确扩展元素以适应子内容宽度

Question

假设我有一个 <ul> 和以下 css：

position:relative;
border: solid;
border-radius:2px;
height:350px;
overflow:auto;
padding-left: 2px;
display:inline-block;
list-style-type:none;

当我将<li> 元素添加到<ul> 作为其子节点时，div 会水平扩展以适应子节点的宽度。

但是，滚动条会占用 div 内的空间。

当添加了足够多的子项以要求滚动条时，最宽的文本节点会包裹最后一个单词。

我发现解决此问题的唯一方法是将<ul>s white-space 属性设置为nowrap，但这只会使文本流过边界，而不是扩展边界本身并创建一个丑陋的水平滚动条。

演示

ul {
  position: relative;
  border: solid;
  border-radius: 2px;
  height: 150px;
  overflow: auto;
  padding-left: 2px;
  display: inline-block;
  list-style-type: none;
  /*Uncomment below to see the effect of adding nowrap*/
  /*white-space: nowrap;*/
}

<ul>
  <li>short</li>
  <li>short</li>
  <li>short</li>
  <li>short</li>
  <li>short</li>
  <li>short</li>
  <li>short</li>
  <li>LONG STUFF-STUFF</li>
  <li>short</li>
  <li>short</li>
  <li>short</li>
  <li>short</li>
  <li>short</li>
</ul>

相同 sn-p 的 jsFiddle，如果您更喜欢使用它：https://jsfiddle.net/Lg0s231g/1/

Answer 1

您的<ul> 元素已经缩小以适应，因为它设置为inline-block。你只需要为滚动条增加额外的空间。

添加：

overflow-x: clip;
padding-right: 20px;
white-space: nowrap;

这里是JSFiddle