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

Eisten
  • 454

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

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

正常
正常

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

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;
}
回复
阅读 8.7k
4 个回答

解决方法:

.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)时,它的宽素就不会收到父元素的宽度限制。

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

qianyi
  • 2
新手上路,请多包涵

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏