Chrome在Flexbox布局中使用overflow：auto错误地呈现滚动条

Question

使用以下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>

我希望在左侧面板上看到滚动条，就像IE＆amp; FF：

但在Chrome Version 47.0.2526.106 m上，我得到了 50％的机会：

通过更改浏览器窗口大小和/或重新加载页面，问题可能会出现/消失。使用Chrome开发工具，我发现右侧面板向左移动了大约15px，导致它在左侧面板的滚动条上重叠。

这是Chrome中的错误吗？如何在Chrome中设置预期输出而不设置溢出滚动？

https://jsfiddle.net/a9o5h00y/

中的相同代码

Answer 1

在Chrome（版本47.0.2526.80 m），Firefox和IE11中测试。

所有浏览器中都会出现滚动条而没有问题。

但是，如上所述，滚动条会在Chrome窗口重新调整大小时消失。

首先注意：如果刷新页面，滚动条会重新出现。

第二个注意事项：由于任意消失行为，我认为将此归类为错误是安全的。

跨浏览器解决方案：

基于：

  

使用Chrome开发工具，我发现右侧面板向左移动约15px，导致它在左侧面板的滚动条上重叠。

我发现以下代码修补了上面列出的所有浏览器的“错误”：

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

Revised Demo

事实上，根据CSS layout stacking order，在这种情况下甚至不需要z-index。该补丁应仅与position: relative一起使用。

但同样，它似乎确实是Chrome 47中的一个错误，已在后续版本中解决：

• Chrome 47 bug in flexbox, scrollbar overlap