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

Question

我有以下代码：

<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上运行。

Answer 1

我猜测文本显示在一行中很重要吗？ （即你需要white-space：nowrap;）？

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

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;