我的布局有一个容器flex容器和一个孩子。
HTML：
<div class="flex-container"> <div>text</div> </div>
容器和儿童具有未知的高度。目标是：
>如果孩子的高度低于容器，它会出现水平和垂直居中。
>如果孩子的高度比容器的高，它调整到顶部和底部，我们可以做滚动。
方案：
CSS：
.flex-container
{
display: flex;
align-items: center; // vertical
justify-content: center; // horizontal
width: 100%;
height: 300px; // for example purposes
overflow-y: scroll;
background: #2a4;
}
.flex-container > div
{
background: #E77E23;
width: 400px;
}
Codepen：http://www.codepen.io/ces/pen/slicw
但是，如果容器的孩子具有更大的高度，则该孩子不能正确地显示。孩子出现cutted(只有顶部)。
Codepen：http://www.codepen.io/ces/pen/sGtfK
方案：
解决方法
我找到了解决方案：
.flex-container
{
display: flex; // only
overflow-y: scroll;
}
.flex-container > div
{
margin: auto; // horizontal and vertical align
}
Codepen：http://codepen.io/ces/pen/Idklh
