flex布局使用在overflow: auto容器内时，溢出部分被修剪的解决办法？

Question

下面例子只是为了更好重现问题。

当flex布局使用了 justify-content: center; 时，外围容器 overflow: auto; 会修剪x轴左溢出（或修剪y轴上溢出）。请问这种情况如何解决？

正常

x轴左侧被修剪，无法显示完全

x轴右侧滚动正常

测试结构：

<div class="page-mod">
    <div class="pagination">
        <a class="page-prev" rel="prev" href="#@">«</a>
        <span class="current">1</span>
        <a href="#@">2</a>
        <a href="#@">3</a>
        <span class="page-break">...</span>
        <a href="#@">8</a>
        <a class="page-next" rel="next" href="#@">»</a>
    </div> 
</div>

样式：

    .page-mod {
      /*..*/
      overflow: auto;
    }
    .page-mod .pagination {
      /*..*/
      display: flex;
      justify-content: center;
      flex-flow: row nowrap;
    }
    .pagination > a, .pagination .current, .pagination .page-break {
    padding: .625rem 1.125rem;
    margin: 0 .1875rem;
    border: 1px solid #eeeeee;
    border-radius: .25rem;
}

Answer 1

解决方法：

.page-mod {
    /*..*/
    width: 300px;
    height: 38px;
    margin: 0 auto;
    overflow: auto;
    position: relative;
}
.page-mod .pagination {
    /*..*/
    position: absolute;
    display: flex;
    justify-content: center;
    flex-flow: row nowrap;
}
.pagination > a, .pagination .current, .pagination .page-break {
    padding: .625rem 1.125rem;
    margin: 0 .1875rem;
    border: 1px solid #eeeeee;
    border-radius: .25rem;
}

具体原因是：
对于在正常文档中子元素，width设置为auto时，只能达到父元素宽度的100%。即使是flex也如此。当你把元素抽离文档流时（position：absolute）时，它的宽素就不会收到父元素的宽度限制。

Answer 2

.page-mod 里面添加display:grid 完美解决

Answer 3

给page-prev也设置一下display: flex

Answer 4

外层再嵌套一层div，display: flex; justify-content: center; 然后修改的justify-content .page-mod .pagination { justify-content: flex-start }
不行去 http://test.cxxgame.com/tourn... 看赛事信息部分的样式