如何防止收缩包装的容器滚动条与其内容重叠？

Posted 2023-03-30

【中文标题】如何防止收缩包装的容器滚动条与其内容重叠？

【英文标题】：How to prevent a shrinkwrapped container's scrollbar from overlapping its content?

【发布时间】：2015-11-17 14:38:17

【问题描述】：

我有以下代码：

<div style="
		border: 1px solid red;
		overflow: auto;
		max-height: 120px;
		display: inline-block;
	">
  <div style="
		height: 160px;
		border: 1px solid blue;
		white-space: nowrap;
		overflow: hidden;
	">text here to occupy some width</div>
</div>

结果如下： 正如预期的那样，红色框收缩了蓝色框，但滚动条与内容重叠，我不希望这样。

我需要做到这一点：

如何做到这一点？

PS：我需要这个才能在 Google Chrome 上工作。

【参考方案1】：

我猜文本显示在一行中很重要？ （即你需要空格：nowrap;）？

您可以在内部 div 中添加一个与滚动条宽度相同的 padding-right。

<div style="
    border: 1px solid red;
    overflow: auto;
    max-height: 120px;
    display: inline-block;
"><div style="
    height: 160px;
    border: 1px solid blue;
    white-space: nowrap;
    overflow: hidden;
    padding-right: 17px;
">text here to occupy some width</div></div>

【讨论】：

不幸的是，如果没有滚动条，这将不起作用（我也需要覆盖这种情况）