flex居中，子元素overflow时无法滚动到顶部和左侧

[Little-Gee]

<div class="wrap">
    <div class="box">
        <div>第一行啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
        <div>第二行啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
        <div>第三行啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
        <div>第四行啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
        <div>第五行啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
        <div>第六行啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
        <div>第七行啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
        <div>第八行啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
    </div>
</div>

<style>
html,
body {
    height: 100%;
}
.wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    overflow: auto;
}
.box {
    flex-shrink: 0;
    width: 500px;
    height: 500px;
    background: red;
}
.box div {
    height: 50px;
    background: skyblue;
}
</style>

本意是让子元素居中，可是当子元素超出宽度时，滚动条无法滚动到顶部和左侧

解决方案：

将 justify-content: center 和 align-items: center 改成 margin: auto 的形式即可

如果要兼容ie10，那么设置flex的元素还需要添加 align-items: flex-start（前缀和转换什么的自己弄）

参考：

Can't scroll to top of flex item that is overflowing container