Chrome incorrectly rendering scrollbar in Flexbox layout with overflow: auto

Question

With following CSS/HTML:

.container {
  display: flex;
  flex-flow: row;
  align-items: stretch;
  height: 200px;
}
.left {
  flex: 0 1 100px;
  overflow: auto;
  background-color: red;
}
.right {
  flex: 1;
  background-color: green;
}

<div class='container'>
  <div class='left'>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>end</p>
  </div>
  <div class='right'>
    right
  </div>
</div>

I expected to see scrollbar on left panel, as in IE & FF:

But on Chrome Version 47.0.2526.106 m there is about 50% chance I got:

The problem may appear/disappear by changing browser windows size and/or reloading page. Using Chrome dev tool, I found right panel is shifted left by about 15px causing it to overlap on the scrollbar of left panel.

Is this a bug in Chrome? How to get expected output in Chrome without setting overflow to scroll?

Same code in https://jsfiddle.net/a9o5h00y/

@cameronjonesweb, The problem may appear/disappear by changing browser windows size. Also, I use Windows 7, not sure if that makes any difference. — abbr, Dec 17 '15 at 02:09
Running into the same thing -- glad I'm not the only one. At first I thought my left div scrollbar was disappearing, but in fact the right div was just overlapping by the exact width of the scrollbar.... — VictorKilo, Jan 17 '16 at 11:07

score 2 · Answer 1 · edited May 23 '17 at 12:15

Tested in Chrome (Version 47.0.2526.80 m), Firefox and IE11.

Scroll bar appears in all browsers without issue.

However, as noted, the scroll bar disappears in Chrome on window re-size.

First note about this: If you refresh the page, the scroll bar re-appears.

Second note: Due to the arbitrary disappearing act, I think it's safe to classify this as a bug.

Cross-Browser Solution:

Based on:

Using Chrome dev tool, I found right panel is shifted left by about 15px causing it to overlap on the scrollbar of left panel.

I found that the following code patches the "bug" on all browsers listed above:

.left {
    flex: 0 1 100px;
    overflow: auto;
    background-color: red;
    position: relative; /* new */
    z-index: 1;  /* new */
}

Revised Demo

In fact, based on the CSS layout stacking order, z-index shouldn't even be necessary in this case. The patch should work with position: relative alone.

But again, it does appear to be a bug in Chrome 47, which has been resolved in subsequent versions:

Chrome 47 bug in flexbox, scrollbar overlap

Thanks @Michael_B. I also came up with the z-index idea. I consider it as a mitigation rather than complete solution because it essentially hides the left 15px portion of the right panel. An ideal solution should shift right panel to right by 15px. — abbr, Dec 17 '15 at 02:44
I posted a link that may shed some light. Looks like the bug is resolved in Chrome versions > 47. — Michael Benjamin, Dec 17 '15 at 02:55

Chrome incorrectly rendering scrollbar in Flexbox layout with overflow: auto

1 Answers1