Bugzilla – Bug 15880
Interaction of scrollbars with the CSS box model is not well-defined (Issue 208 etc)
Last modified: 2012-12-04 00:52:29 UTC
Scrollbars seem to cause problems in the CSS21 box model, and the seemingly straightforward phrase in 11.1.1:
# In the case of a scrollbar being placed on an edge of the element's
# box, it should be inserted between the inner border edge and the
# outer padding edge.
is not sufficient to define the model correctly.
This bug report is for collecting relevant information.
Discussed by Øyvind Stenhaug, Boris Zbarsky
What are the used values of width, height and padding for a box which has scrollbars? Putting the scrollbar outside the padding box doesn't actually happen in reality (since it would overlap other content in the case of zero border width and margin width).
When the height of an overflow:scroll box is non-auto, the scrollbars seem to cause an increase in used height in most UAs. When the height is auto, however, there's an argument that putting the scrollbar *into* the padding is the right behavior from the author standpoint since otherwise any overflow:auto block with
horizontal overflow and auto height would also be forced to have vertical overflow.
Then there's the issue of containing blocks: 11.1.1 tries to adjust the containing block dimensions for boxes with scrollbars:
# Any space taken up by the scrollbars should be taken out of
# (subtracted from the dimensions of) the containing block formed
# by the element with the scrollbars.
but it's not clear why this approach is used (nor whether it is well-defined) instead of simply modifying the used values of width/height/padding.
See discussion beginning at http://lists.w3.org/Archives/Public/www-style/2010Aug/0541.html
Note: the above issue is Issue 208:
Issue 208: http://wiki.csswg.org/spec/css2.1#issue-208
Horizontal scrollbars confuse width/height/etc calculations
No change to spec, address any clarifications in errata.