Flex布局使用justify-content和align-items属性存在滚动条时出现部分内容被截断无法滚动问题

问题

有一次开发人员和我反馈他的某个表单第一行看不到标题了，我第一反应觉得是不是他自己加了什么自定义样式导致表单容器偏移，或者是说加了什么隐藏的样式了。

到他电脑上一看，怪了，全不是我猜测的那样，具体情况就是这个表单是嵌套了很多表单元素，有垂直滚动条的那种，但是被隐藏的那部分，滚动条已经处于最上方了。

一时没有思路后决定载自己电脑上好好看看到底是什么属性影响到了，谁知奇怪的事情发生了，我的电脑上没有这个问题。这个时候我就马上联想到了应该是浏览器样式属性兼容问题导致的了。

一问他用的浏览器版本是112版本，而我电脑上用的是最新的版本。

于是一个个排查可能存在兼容问题的属性，先从表单最外层容器开始，没过一会，就找到了可疑的属性。

.wrap {
  justify-content: safe center
}

嗯？这个justify-content属性什么时候能支持两个值这种写法了，但是从字面意思上大致能猜出这个safe代表安全的作用，会不会就是因为加了解决了默认浏览器上半部分内容不能显示的问题，而他的浏览器因为版本太老还没有支持这个属性。

于是我把这个safe属性去了以后上半部分被隐藏了，这一操作也就验证了我的想法。再去看看这个属性的支持版本，最低是115，这样一来基本上是确认问题了。

考虑到目前我们项目对浏览器的支持版本有要求，最低要支持到100，显然这个问题还是要修复的，于是在网上找到了同样的问题 https://stackoverflow.com/questions/33454533/cant-scroll-to-top-of-flex-item-that-is-overflowing-container。

文中就提到了flex布局使用justify-content:center和align-items:center可以轻松实现垂直居中和水平居中。

但是这个用法存在一个问题，那就是当flex-item的内容比flex容器大的时候。

也就是上面遇到的表单容器最上层存在部分内容被遮挡无法查看。

最后给出了auto margin的修复建议

只需替换原有定义样式

#flex-container {
    align-items: center;
    justify-content: center;
}

为这种写法

.flex-item {
    margin: auto;
}

那另外的一个更简单官方的处理方法其实就是上面一开始遇到的问题，使用safe关键词，只是这个用法需要最新浏览器115版本的支持才行。