「Debug」flex与overflow: scroll一起使用出现的冲突问题

问题描述

在最近的开发过程中，经常遇到一个奇怪的样式异常问题，并且在Safari、Chrome等浏览器上均出现该问题。

有一个父元素A，包含一个子元素B，子元素B中包含若干个子元素C。

其中，A、B均设置display: flex，且A为了使B在A中水平居中，设置了justify-content: center;，而B的宽度由许多个子元素C来撑开。

当B的宽度超过A的宽度时，表现为溢出。需要设置overflow-x: auto或overflow-x: scroll来使其能通过滚动来显示。

但这个时候，问题就出现了，B虽然能通过滚动来显示，但并不能显示完全，总是有开头的一部分（水平滚动的话是最左边有一部分）始终在A的可视范围之外，无法通过滚动来显示出来。如下图所示：

这个问题困扰了我好久，始终找不出问题所在，究竟为什么会这样，难道是这些浏览器都有这个样式异常问题吗？

总之，目前找到了导致这个问题出现的根源，并有曲线救国的方法。

复现条件

当父元素同时设置justify-content: center;和overflow-x: scroll时（Y轴方向同理），就会出现该问题（子元素溢出该父元素时，无法通过滚动完全显示）。

解决方案

父元素不使用justify-content: center;，而改用其他方式来使子元素水平居中。

比如设置子元素的左右外边距为automargin: 0 auto 0 auto，使其能够水平居中。

PS: 实在修复不了的时候，可以考虑用grid布局，或在中间用grid布局做个隔离。

相关资料

• 无法滚动到容器溢出的 flex 元素顶部
• scroll和flex居中布局冲突