Horizontal scrollbar in Chrome with direction RTL

Question

On Chrome there is a horizontal scrollbar on a page with direction rtl in combination with margin-right: auto and overflow: auto even though there is no margin and no content.

For an example, see https://jsfiddle.net/ht3drjae/2/. I would expect to see no green background color and no horizontal scrollbar as inner and outer should have the same width.

The scrollbar is only there on Chrome, but not on Firefox or IE. So why is the scrollbar there? Is this a browser bug?

HTML:

<div class="outer">
    <div class="inner"></div>
</div>

CSS:

body {
    direction: rtl;
}
.outer {
    height: 500px;
    overflow: auto;
    background: green;
}
.inner {
    height: 1000px;
    margin-right: auto;
    background: red;
}

I'm thinking it's because of the scrollbar on the left causing the extra width. This may help: http://stackoverflow.com/questions/18548465/prevent-scroll-bar-from-adding-up-to-the-width-of-page-on-chrome — deebs, Oct 08 '15 at 15:25
scrollbars do not increase element width, their widht is substracted from the element content width. "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." http://www.w3.org/TR/CSS21/visufx.html#overflow — Luizgrs, Oct 08 '15 at 16:40

score 4 · Answer 1 · answered Dec 28 '15 at 10:06

4

You need to set direction: ltr on your body tag, wrap the whole content of page in a div and set its direction to rtl.

answered Dec 28 '15 at 10:06

Sohrab Taee

761
1
10
29

I ran into the same problem, and this fix worked perfectly! – Brandon Rhodes Jan 18 '18 at 11:29
This works, thank you! But it might be really a Chrome bug. Firefox works as expected – Vadim Jan 26 '22 at 07:22

score 3 · Accepted Answer · answered Oct 08 '15 at 16:34

I believe it's a bug:

10.3.3 Block-level, non-replaced elements in normal flow

The following constraints must hold among the used values of the other properties:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

If 'width' is not 'auto' and 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' (plus any of 'margin-left' or 'margin-right' that are not 'auto') is larger than the width of the containing block, then any 'auto' values for 'margin-left' or 'margin-right' are, for the following rules, treated as zero.

If all of the above have a computed value other than 'auto', the values are said to be "over-constrained" and one of the used values will have to be different from its computed value. If the 'direction' property of the containing block has the value 'ltr', the specified value of 'margin-right' is ignored and the value is calculated so as to make the equality true. If the value of 'direction' is 'rtl', this happens to 'margin-left' instead.

If there is exactly one value specified as 'auto', its used value follows from the equality.

If 'width' is set to 'auto', any other 'auto' values become '0' and 'width' follows from the resulting equality.

If both 'margin-left' and 'margin-right' are 'auto', their used values are equal. This horizontally centers the element with respect to the edges of the containing block.

http://www.w3.org/TR/CSS2/visudet.html#blockwidth

For you example, the computed values for .inner are

margin-left: 0 (initial value)
border-left-width: 0 (because boder-style initial value is none)
padding-left: 0 (initial value)
width: auto (initial value)
padding-right: 0 (initial value)
border-right-width: 0 (because boder-style initial value is none)
margin-right: auto

So what should occur is:

If 'width' is set to 'auto', any other 'auto' values become '0' and 'width' follows from the resulting equality.

.inner width should have same width as its parent and thus no horizontal scrollbar should appears.

If we also changes direction to ltr and margin-left:auto or margin-right:auto it does not occurs, so it looks like the issue occurs only when the direction is rtl.

I think you're right and that it's a bug in Chrome. I will file a bug report and see if they want to fix it. Thank you for your answer. — Mythica, Oct 09 '15 at 10:45

score 0 · Answer 3 · answered Oct 08 '15 at 17:02

0

I hope the below code can solve the issue:

.outer {
    height: 500px;
    overflow: hidden;/changed to hidden/
    background: green;
}

overflow:hidden;

and its always better to use direction with html markup like

instead with CSS declaration.

answered Oct 08 '15 at 17:02

Nandu Hulsure

123
1
7

Horizontal scrollbar in Chrome with direction RTL

3 Answers3