Chrome 在 Flexbox 布局中错误地渲染滚动条并溢出：自动

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 和 FF 中一样：

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

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

这是 Chrome 中的错误吗？如何在不设置溢出滚动的情况下在 Chrome 中获得预期的输出？

https://jsfiddle.net/a9o5h00y/中的代码相同

Answer 1

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

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

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

关于这一点的第一个注意事项：如果您刷新页面，滚动条会重新出现。

第二点：由于任意消失的行为，我认为将其归类为错误是安全的。

---

跨浏览器解决方案：

基于：

使用 Chrome 开发工具，我发现右侧面板向左移动了大约 15 像素，导致它与左侧面板的滚动条重叠。

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

.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