居中的内容，设置overflow-x:auto后，左边溢出元素的内容将无法通过滚动条显示，如何解决？

1 问题描述：

如图所示：
电子邮箱本应该是abcdefghijklmnopqrstuvwxyzabcdefg@123.com，但是设置该元素为overflow-x:auto后，滚动条无法显示邮箱的全部内容。
设置overflow-x:visible后，显示的内容如下：

2 主要代码：

包裹文字的元素是div。html代码如下：

                            <div
                                :class="table.tableHead[7].headClass"
                                v-show="table.tableHead[7].show"
                            >{{ item.email }}</div>

css如下：

感觉就像是由于居中后，左右两边都会有文字溢出元素，然而左边的会被隐藏，只有右边的可以通过拖动scroll显示。想问一下大家有什么办法可以在保证内容居中的前提下，让所有的内容都可以通过拖动滚动条看到？