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

假设我有一个带有以下css的

：

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

当我将

元素作为子节点添加到

中时，div水平扩展以适应子节点的宽度

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

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

我发现修复此行为的唯一方法是将

s

空白

属性设置为

nowrap

，但这只会使文本流过边界，而不是扩展边界本身并创建丑陋的水平滚动条

演示

ul{
位置：相对位置；
边框：实心；
边界半径：2px；
高度：150像素；
溢出：自动；
左侧填充：2px；
显示：内联块；
列表样式类型：无；
/*取消下面的注释以查看添加nowrap的效果*/
/*空白：nowrap*/
}

短
短
短
短
短
短
短
长篇大论
短
短
短
短
短

您的

元素已经缩小到适合的程度，因为它被设置为

内联块。您只需为滚动条添加额外的空间

加：

这里是
请添加工作代码段。哪些浏览器支持

overflow-x:clip，它只出现在编辑的草稿中。诚然，官方似乎不太支持它，但它的行为非常类似于

overflow-x:hidden

，也可以在这里使用

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