flex 与 overflow 冲突

问题场景：

父盒子高度会变化，可能会比子盒子大，也可能会比子盒子小。

比子盒子大的时候，希望子盒子垂直居中；
比子盒子小的时候，能够正常滚动；

在这里插入图片描述

<body>
  <div class="outer">
    <div class="inner">12</div>
  </div>
</body>

当子盒子大于父盒子的时候：

<style>
.outer {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    background-color: antiquewhite;
}
.inner {
    width: 20px;
    height: 100px;
    background-color: aqua;
}
</style>

问题：子盒子最上面会有一部分内容显示不出来。

在这里插入图片描述

解决：

1 修改 outer 的 align-items

.outer {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: safe center; /* 加上safe */
    justify-content: center;
    overflow-y: auto;
    background-color: antiquewhite;
}

safe

与其它对齐值一起使用。如果所选对齐值导致元素溢出容器，则将元素按 start 方式对齐。

2 outer 不使用 align-items，inner 使用 margin

<style>
.outer {
    width: 50px;
    height: 50px;
    display: flex;
    /* align-items: center; */
    justify-content: center;
    overflow-y: auto;
    background-color: antiquewhite;
}
.inner {
    width: 20px;
    height: 100px;
    background-color: aqua;
    margin: auto; /* 添加 margin */
}
</style>