Can I expand a div so the overflow-y:auto scrollbar doesn't clip the div content?

Question

Similar question, without a great answer:
How can I include the width of "overflow: auto;" scrollbars in a dynamically sized

Answer 1

Have you tried simply using overflow-x: visible; or hidden

Answer 2

First: To remove the horizontal scrollbar set overflow-x: hidden; as Trent Stewart has already mentioned in another answer.

CSS Approach:

One thing I have done in the past is to add a wider wrapping div around the content div to make room for the scrollbar. This, however, only works if your container width is fixed... and may need to be adjusted (by serving different styles) in various browsers due to variable rendering of scrollbars.

Here a jsfiddle for your case. Note the new wrapper <div id="menu-wrap"> and its fixed width width: 95px;. In this case the wrapper div is doing the scrolling.

You could probably also solve this by giving the wrapper some padding on the right, and thereby avoid the fixed width problem.

---

jQuery Approach:

Another option is to detect the overflow using jquery as described here, and then increasing the width or padding of the div to make space. You may still have to make browser-specific adjustments though.

Here a jsfiddle with a simplified version for your example. This uses your click function to check the div height after every click, and then adds some padding to make room for the scrollbar; a basic comparison between innerHeight and scrollHeight:

if($('#menu').innerHeight() < $('#menu')[0].scrollHeight){
    $('#menu').css( "padding", "0 15px 0 0" );
}

To make this more cross-browser friendly you could check for the scrollbar width (as outlined here) and then add the returned value instead of the fixed padding. Here another jsfiddle to demonstrate.

---

There are probably many other methods, but this is how I would go about it.