Horizontal padding with vertical scrollbar but no horizontal scrollbar

0
votes

How can you add horizontal padding to an inline-block div that has a vertical scrollbar (like a sidebar) without getting a horizontal scrollbar? I'm looking for a solution which doesn't require a fixed width (just uses the width of the content of the sidebar).

I tried putting the padding in the inner div and the scrollbar on the outer div, thinking it would then make room for both, but the scrollbar still steps on the right padding.

Example:

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/

2
cssscrollbar

2 Answers

0
votes

If someone can provide a less hacky answer, please do.

The following works, at least in Firefox: add about 16px to the padding-right for the width of the scrollbar, and set overflow-x to hidden.

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

Was this what you were looking for? I added width: 100%; to #div1. You should also be able to use width:auto; if you don't want it 100%.

Note: based on comment below #div1 was changed to have width: 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>