Vertical Scrollbar leads to horizontal scrollbar

Question

My CSS looks like this:

div.SOMECLASS {
  position: absolute;
  max-height: 300px
  height: auto;
  width: auto;
  overflow: auto;
  ...
}

Answer 1

This bug (specific to Firefox) occurs even when not setting a fixed width.

For instance, if you have a vertically scrollable container div (overflow: auto;) inside a flexible wrapper div (display: inline-block;), then when you resize the window to be smaller than the content can wrap, first, a horizontal scrollbar will appear in your container div, and only after that, the flexible wrapper div will grow or eventually a secondary horizontal scrollbar will appear in your window.

The result is a useless horizontal scrollbar, that only can scroll the width of the vertical scrollbar:

In order to get rid of this issue, you could use the javascript-code from this example (tested in Firefox and Chromium):

    
    

        

            

                

                    The wrapper-div should expand to fit the scroller content.
                    Reduce the browser window width, and a useless horizontal scrollbar appears.
                
            
        
    
    

        

            

                

                    But with the javascript-function, this is now fixed.
                    There is no horizontal scrollbar in the wrapper-div.
                
            
        
    
    

The javascript function ensureScrollbarWidthPadding dynamically adds a padding-right to the vertically scrollable container, to ensure that the horizontal scrollbar will never appear.