flex布局使用在overflow: auto容器內(nèi)時(shí)，溢出部分被修剪的解決辦法？

下面例子只是為了更好重現(xiàn)問(wèn)題。

當(dāng)flex布局使用了 justify-content: center; 時(shí)，外圍容器 overflow: auto; 會(huì)修剪x軸左溢出（或修剪y軸上溢出）。請(qǐng)問(wèn)這種情況如何解決？

正常

x軸左側(cè)被修剪，無(wú)法顯示完全
x軸左側(cè)被修剪，無(wú)法顯示完全

x軸右側(cè)滾動(dòng)正常

測(cè)試結(jié)構(gòu)：

<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;
}

回答

編輯回答

只愛(ài)你

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

2018年5月24日 13:33

編輯回答

久舊酒

給page-prev也設(shè)置一下display: flex

2017年9月16日 05:29

編輯回答

神曲

解決方法：

.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;
}

具體原因是：
對(duì)于在正常文檔中子元素，width設(shè)置為auto時(shí)，只能達(dá)到父元素寬度的100%。即使是flex也如此。當(dāng)你把元素抽離文檔流時(shí)（position：absolute）時(shí)，它的寬素就不會(huì)收到父元素的寬度限制。

2018年5月18日 16:33