Bug 17309 – Absolutely-positioned div with "overflow: visible auto" doesn't allow enough width for contents when scrollbar is present

• Component: Layout and Rendering
• Status: NEW

[Jonathan Hurshman]

An absolutely-positioned div with overflow-x: visible and overflow-y: auto ought to permit its children to determine its width. In so doing, the width of the div's scrollbar needs to be accounted for, if it is visible. 

However, it appears that WebKit is not accounting for the scrollbar's width. It looks like it calculates its contents' height and width and sets its own width, then applies the scrollbar.

This leads to the div being too narrow for the contents, which either causes the contents to wrap, or if the contents are "white-space: nowrap", causes the div to scroll horizontally as well as vertically.

[Jonathan Hurshman]

Created attachment 19066 [details]
A reduction of the issue.

A reduction of the issue, showing one div with non-wrappable contents and another with wrappable.

[Jonathan Hurshman]

(In reply to comment #0)
> An absolutely-positioned div with overflow-x: visible and overflow-y: auto
> ought to permit its children to determine its width.

I should have added that the div in question has no explicit width.

[vituko]

532.5
this bug is still there
more exactly, it happens when the layer pushes the parent width

Ok :
-Absolute positioned layer
-Layer width smaller than parent width

Ko :
-Layer with float left : always pushes
-Layer width bigger than parent width : for example, when increasing the table cell default width

Ok :
<table style="width:200px"><tr><td>
<div style="overflow-y:scroll ; overflow-x:visible">asdf</div>  
</td><td>asdf</td></tr></table>

Ko :
<table style="width:200px"><tr><td>
<div style="overflow-y:scroll ; overflow-x:visible">asdf</div>  
</td><td style="width:100%">asdf</td></tr></table>

<table><tr><td>
<div style="overflow-y:scroll ; overflow-x:visible">asdf</div>  
</td><td>asdf</td></tr></table>

Until the patch comes, possible workaround : overflow-x:hidden + padding-right (scroll width)

[vituko]

Sorry

Until the patch comes, possible workaround : overflow-x:hidden + padding-right (scroll width) ...

... but the padding is seen in IE and Firefox, both work as expected. The behavior in Opera and Khtml is similar to Webkit.

overflow-x:visible also becomes auto in Firefox, but the vertical scroll width is computed and the box pushes its container without showing the horizontal scroll nor hiding some content.

[vituko]

532.5
this bug is still there
more exactly, it happens when the layer pushes the parent width

Ok :
-Absolute positioned layer
-Layer width smaller than parent width

Ko :
-Layer with float left : always pushes
-Layer width bigger than parent width : for example, when increasing the table cell default width

Ok :
<table style="width:200px"><tr><td>
<div style="overflow-y:scroll ; overflow-x:visible">asdf</div>  
</td><td>asdf</td></tr></table>

Ko :
<table style="width:200px"><tr><td>
<div style="overflow-y:scroll ; overflow-x:visible">asdf</div>  
</td><td style="width:100%">asdf</td></tr></table>

<table><tr><td>
<div style="overflow-y:scroll ; overflow-x:visible">asdf</div>  
</td><td>asdf</td></tr></table>

Until the patch comes, possible workaround : overflow-x:hidden + padding-right (scroll width)

[vituko]

Sorry, I dont know if I should use a webkit browser, but I had technical problems to submit my comments.

[nicolas roumiantzeff]

The issue is not yet fixed in current version of webkit browsers.
Tested on:
- Safari 5.0.3 (7533.19.4)
- Chrome 8.0.552.215

Our web application uses a scrollable div inside a table non-fixed width table. 

We currently use the workaround suggested in this log (thanks Vituko) but the problem is that the width of the scrollbars may vary from system to system (and perhaps resolution or settings).

[Robert Hogan]

Unless I'm mistaken FF4 treats the reduced test case the same as WebKit now.

[Ahmad Saleem]

In attached test case, Safari 16.3 show horizontal scrollbar for first container similar to Firefox Nightly 112 while Chrome Canary 112 does not show horizontal scrollbar.

Just wanted to share updated testing results. Thanks!