CSS：flex布局，使用center进行居中布局时，滚动条无法滑动到顶部

情况描述：

在使用flex布局时，使用justify-content或align-items进行居中布局，也就是值为center时，浏览器滚动条无法滑动到顶部。

至于为什么是justify-content或align-items，这取决是flex的布局方向，当flex-direction: column，那么justify-content:center,此时纵向滚动条无法滑动到顶部。

如上图所示，从右侧调试工具中可以看出，最顶部有“11···22···”的内容，但滚动条无法滑动至顶部查看这段内容

类.content-box代码如下

.content-box {
    width: 100%;
    background: rgb(237, 237, 237, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: auto;
 }

解决：

遇到这个问题有些懵，也没查到具体是什么原因，反正这样布局就是会出现这个问题。

修改justify-content属性值为:start，或者直接去掉justify-content属性即可解决此问题。