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

Question

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

我尝试将填充放在内部div和外部div上的滚动条，认为它会为两者腾出空间，但滚动条仍然在右边的填充处。

示例：

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

这是你在寻找什么？我加宽了：100％;到＃div1。你也应该能够使用width：auto;如果你不想100％。

注意：根据下面的评论#div1更改为宽度：auto; padding-right：1em;

html, body { margin: 0; padding: 0; position: absolute; top: 0; bottom: 0; left: 0; right:0 ; overflow: hidden; }
#div1 { display: inline-block; height: 100%; width: auto; padding-right: 1em; overflow-y: auto; background-color: gray;}
#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>

Answer 2

如果有人可以提供较少的hacky答案，请执行。

以下工作，至少在Firefox中：为padding-right添加约16px的滚动条宽度，并将overflow-x设置为hidden。

＆＃13;

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;