Own scrollbar inside an absolutely positioned element

Question

I'm having problems with scrollbars on an element with position: absolute . The behavior I am experiencing is that chrome 21 and firefox 15 display scrollbars inside the field, resizing it, thereby hiding part of the text, however Opera 12 and Internet explorer 9 also displays it inside, but without resizing the content and resizing the field instead (this, in my opinion, is correct, since the field does not have a certain width). Is there any solution to make this the same in these four browsers?

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

Edit: as Shiva Charan pointed out, it works correctly when overflow-y is set to “scroll”, however it always shows a scroll bar that is not needed

Edit: my final decision based on Siva Charan answers and anonymous vote 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 in all browsers is via 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; }; }); 

Answer 2

Add overflow-y: scroll; at .container.two

 .container.two { top: 250px; overflow-y: scroll; } 

Contact LIVE DEMO

UPDATE:

If you are comfortable, you can use text-overflow: ellipsis; and replace   to actual space

Answer 3

This is more a workaround than a real solution, but it can be good enough. Basically, first wrap the contents of container two in another div and add some legal addition to it. Make sure you also set width: 100% to .item .

Here's a modified version of your demo: a small link .

This is not perfect, but I hope this helps!