内容溢出滚动时显示不全的问题

需求如图：要求数据垂直居中，与左侧饼图垂直方向上居中对齐；

代码如下：

<div class="parent-box" style="overflow:auto">
    <div class="children-box">
        //内部数据，每一条数据高度固定，假设每条height=40px;
        <div style="height:40px">数据1</div>
        <div style="height:40px">数据2</div>
        <div style="height:40px">数据3</div>
        <div style="height:40px">数据4</div>
        <div style="height:40px">数据5</div>
    </div>
</div>

 CSS如下：

.parent-box{
    height:100%;
}
.children-box{
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

这样的代码小屏时就发现有个问题，高度不够是会出现滚轴的，但是始终滚不到顶部，看不到上边溢出的部分；因为是flex的垂直居中布局，只会滚动下方溢出的部分，上方溢出部分是看不到的；所以再给children-box加个最小高度限制，让他必定能包住所有数据高度；

给children-box加一条：min-height:200px;(5条数据，每条高度40px）

这样就不会再有显示不全的问题了；

这种布局，要注意两个地方：

1.数据外得有两层，要在parent-box里滚动数据，children-box来限制数据布局；

2.children-box的高度设置：height:100%;min-height:200px;