使“溢出：滚动”与居中的柔性框布局一起工作

Question

考虑以下示例：

HTML

<div id="body">
  <div id="container">
    <div id="item-1"></div>
    <div id="item-2"></div>
  </div>
</div>

CSS

#body {
  height: 500px;
  width: 500px;
  background-color: yellow;
  overflow: scroll;
}

#container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#item-1 {
  background-color: red;
  width: 200px;
  height: 100px;
}

#item-2 {
  background: linear-gradient(to right, black, white);
  width: 1000px;
  height: 100px;
}

另见https://jsfiddle.net/nfzo3xfj/5/

我有一个Flex容器，其中有两个项目作为居中列。这些项可能比周围的<div>元素大，所以我想在这种情况下使用overflow: scroll来启用滚动。但是，滚动仅在一个方向（向右侧）起作用。如何启用向第二个项目的左侧（黑色）侧滚动？