css - 带有垂直滚动条但没有水平滚动条的水平填充

Question

如何在没有水平滚动条的情况下向具有垂直滚动条(如侧边栏)的内联 block div 添加水平填充？我正在寻找不需要固定宽度的解决方案(只使用侧边栏内容的宽度)。

我尝试将 padding 放在内部 div 中，将滚动条放在外部 div 中，以为这样可以为两者腾出空间，但滚动条仍然踩在正确的 padding 上。

例子:

html, body {
    margin: 0; padding: 0;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    overflow: hidden;
}
#div1 {
    display: inline-block;
    height: 100%;
    overflow-y: auto;
}
#div2 {
    display: inline-block;
    padding: 0 10px;
    height: 100%;
}

<div id='div1'>
  <div id='div2'>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
  </div>
</div>

JSFiddle: https://jsfiddle.net/msxjL52d/2/

Answer 1

如果有人可以提供不那么骇人听闻的答案，请提供。

以下是有效的，至少在 Firefox 中:为滚动条的宽度向 padding-right 添加大约 16px，并将 overflow-x 设置为 隐藏。

html, body {
    margin: 0; padding: 0;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    overflow: hidden;
}
#div1 {
    display: inline-block;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}
#div2 {
    display: inline-block;
    padding: 0 26px 0 10px;
    height: 100%;
}

<div id='div1'>
  <div id='div2'>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
  </div>
</div>