Question

I’m having some issues with scrollbars on element with position: absolute. The behavior I’m experiencing is that chrome 21 and firefox 15 displays scrollbars inside the box, resizing it’s content thus hiding some of the text, however opera 12 and internet explorer 9 displays it also on the inside, but without resizing it’s content and resizing the box instead (which is in my opinion correct, since the box doesn’t have width defined). Is there any solution to make this look the same in those 4 browsers?

JsFiddle: http://jsfiddle.net/Kukkimonsuta/GaMD7/2/

Edit: as Siva Charan pointed out, it works correctly when overflow-y is set to “scroll” however that shows scrollbar always which is not desired

Edit: my final solution based on answers from Siva Charan and anonymous down voting is lame

http://jsfiddle.net/Kukkimonsuta/GaMD7/15/

function updateAutoScroll(element) {
    var $element = $(element);

    if (element.scrollHeight > element.clientHeight) 
        $element.css("overflow-y", "scroll");
    else 
        $element.css("overflow-y", "auto");
}

Answer 1

The only way to do this dynamically across all browsers is with JavaScript, for simplicity I used jQuery.

http://jsfiddle.net/iambriansreed/mYuQx/

$(function(){

    // loops through each container
    $('.container').each(function(){                
        if(this.scrollHeight>this.clientHeight)
            $(this).children().wrapAll(
                '<div style="padding-right:'+scrollbarWidth()+'px;"/>'
            );
    });

    // gets the browsers current scrollbar width
    function scrollbarWidth() {
        var parent, child, width;    
        if(width===undefined) {
            parent = $('<div style="width:50px;height:50px;overflow:auto"><div/></div>').appendTo('body');
            child = parent.children();
            width = child.innerWidth() - 
                child.height(99).innerWidth();
            parent.remove();
        }    
        return width;
    };

});