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;
}

Answer 1

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.