CSS Flexbox：一个居中的子节点溢出父位置固定

如何在不溢出#container的情况下正确居中#content？ margin：auto有点工作,但对我来说看起来像是黑客,我不想在CSS Flexbox中使用任何边距.

请记住,#container有位置：已修复.

这里的代码演示了这个问题：[View in JSFiddle ↗]

document.getElementById('content').innerHTML = [...Array(100).keys()].join('<br>')

#container {
  position: fixed;
  BACkground: lightblue;
  top: 0; bottom: 0;
  left: 0; right: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
}

#content {
  border: 1px solid green;
  /* uncomment the hack below to get desired behavior */
  /* margin: auto */
}

<div id="container">
  <div id="content">
  </div>
</div>

您可以使用未注释的边距检查所需的行为：auto,问题是如何仅使用flex-属性和无边距来实现相同的结果：auto.

document.getElementById('content').innerHTML = [...Array(100).keys()].join('<br>')

#container {
  position: fixed;
  BACkground: lightblue;
  top: 0; bottom: 0;
  left: 0; right: 0;

  display: flex;
  overflow: auto;
}

#content {
  border: 1px solid green;
  margin: auto;
}

<div id="container">
  <div id="content">
  </div>
</div>