全高应用程序中的Flexbox和垂直滚动提供了第二个滚动条

Question

我正在学习如何使用flexbox，而且在我自己尝试之前我已经阅读了很多。

我遇到垂直滚动和弹性框的当前问题，与此问题非常相似：

Flexbox and vertical scroll in a full-height app using NEWER flexbox api

但是由于我目前无法弄清楚的原因，我的可滚动元素扩展得越多，总的flexbox元素就越大，情况应该不是这样。

以下是我的示例：https://jsfiddle.net/Munsta0/8afLpp0h/4/

#contentContainer {
  background-color: red;
  flex: 1 1 auto; //Rest of space
  overflow-y: scroll

  display: flex;
  overflow: auto;
}

#content{
  min-height: -webkit-min-content;
  display: flex;
  flex-flow: column;
}

当我有溢出时，如何阻止整个事物扩展：滚动？

编辑：我可以确认此错误仅限于Chrome 48