与溢出自动的flex模型垂直对齐

Question

灵活的盒子模型使得垂直对齐的东西非常容易.然而,我一直遇到的一个问题是,当我将视口调整为"太小"的大小时,尽管元素驻留在元素中,但内部框将在顶部溢出overflow: auto.换句话说,你仍然可以滚动到底部(如预期的那样overflow: auto),但它不会反过来.

#con {
  width: 300px;
  height: 100px;
  background: yellow;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
}
#center {
  background: green;
  color: white;
}

<div id="con">
    <div id="center">
        Invisible<br/>
        2<br/>
        3<br/>
        4<br/>
        5<br/>
        6<br/>
        7<br/>
        8<br/>
        9<br/>
        10
    </div>
</div>

现在,我有点明白为什么这种情况正在发生,但是我不知道解决这个问题的最佳方法是什么.如何能你对齐使用灵活盒模型中心的东西,而是让元素溢出,如果它不适合？

Answer 1

小提琴

http://jsfiddle.net/s3bjkqj4/1/

CSS

#con {
  width: 300px;
  height: 100px;
  background: yellow;
display: inline-flex;

  overflow: auto;
}
#center {
  background: green;
  color: white;      
  width:80px;
  text-align:center;
  margin:0 auto;
}

我不确定这是你想要的吗？？？