元素滚动和内容居中同时存在时，flex 布局的 safe 关键字，保证dom元素滚动的时候不溢出

假设你有一个元素 div，同时设置了 flex 布局居中和overflow: auto/scroll。为了防止内容溢出，我们可以使用safe 这个属性，比如

display: flex;
justify-content: safe center;
align-items: safe center;
overflow-y: scroll;

这样就可能保证元素在滚动的时候内容能够显示全。

但是注意，这个 safe 的属性，兼容性不太好。

注意，在我们查询兼容性的时候，不要看到一片绿色就以为万事大吉了，还要关注开始兼容的版本号。比如这个属性在 safari 浏览器中在 17.6 版本以上才开始兼容，但是截至目前为止 17.6 以下版本的 safari 浏览器还是很常见的。所以如果你要考虑兼容的问题，这个属性还是不太能用的。

如果不用 safe 这个这个时候我们可以使用两层结构

	

	    
真正的内容区域
    

.outer-wrapper {
	width: 100%; // 外层设置宽高
	height: 100%;
	border: 2px solid;
	display: flex;
	flex-direction: column;
	align-items: center; // 外层可以设置垂直和水平居中
	justify-content: center;
	padding: 20px; // 外层不能设置overflow
	.inner-wrapper {
		border: 2px solid red;
		width: 80%; // 内层只能设置宽度，不能设置高度，高度让内容自动撑开，才能达到居中的效果
		display: flex;
		flex-direction: column;
		align-items: center; // 内层只能设置水平居中，不能设置垂直居中
		padding: 20px;
		overflow: auto; // 给内层设置overflow
		.content {
			width: 100%;
			height: 2000px;
			flex-shrink: 0;
			background: #ccc;
		}
	}
}

效果如下，在内容比较少的时候

在内容比较多的时候