flex-end为什么overflow无法滚动及解决方法

这篇文章发布于 2021年12月8日,星期三,22:06,归类于 CSS相关。 阅读 20030 次, 今日 4 次 12 条评论

 

flex-end与overflow

一、问题描述

在 flex 布局中,如果整体列表项元素的对齐方式是 flex-end,则当里面的内容超过容器的时候,即使容器设置了 overflow:auto 也是无法有滚动效果的。

比方说下面这个例子,有一个容器,容器中有很多列表,列表有多有少不确定,然后列表居底对齐,内容多的时候可以滚动。

这个时候很容器想到使用 flex 布局实现,因为 DOM 结构可以很简洁,外部容器,里面子项目即可,例如:

<div class="container">
    <item>列表1</item>
    <item>列表2</item>
    <item>列表3</item>
</div>
.container {
    display: flex;
    height: 200px; width: 250px;
    flex-direction: column;
    justify-content: flex-end;
    background-color: rgba(0,0,0,.75);
    gap: 1px;
    border: 1px solid;
    overflow: auto;
}
.container item {
    padding: .5rem 1rem;
    background-color: #fff;
    flex: none;
}

实时渲染效果如下所示:

列表1列表2列表3

可以看到效果良好,符合预期。

但是,如果列表项很多,比方说有7项8项这样子的:

<div class="container">
    <item>列表1</item>
    <item>列表2</item>
    <item>列表3</item>
    <item>列表4</item>
    <item>列表5</item>
    <item>列表6</item>
    <item>列表7</item>
    <item>列表8</item>
</div>

就会发现前几项看不见了,而且无法滚动,明明容器设置了 overflow:auto,子元素的内容高度也溢出了容器,为什么无法滚动呢?

列表1列表2列表3列表4列表5列表6列表7列表8

很多人就不太明白为什么会这样表现,这里给大家解释下原因,其实并不难理解。

二、flex-end 对齐无法滚动原因

是这样的,在 Web 网页中,滚动条出现是有方向性的要求的,由于全世界浏览文字,或者说阅读信息都是从上往下开始的,因此,滚动条的滚动也是从上往下。

所以滚动条在设计的时候,就约定了,只有容器下方(或右侧)内容有多余,才需要滚动,因为不可能说后续的阅读信息在阅读起点的上面,这不符合真实世界的阅读逻辑。

所以,这就导致,如果有内容是在上方或左侧超过容器的尺寸限制,滚动条是不会有任何变化的。

这样的现象其实大家应该都遇到过,那就是绝对定位隐藏只能设置一个大大的负值,但是不能设置一个大大的正值。

.absolute-out {
    position: absolute;
    left: -999px; top: -999px;
}

但是如果是超出屏幕以外的正值,例如:

.absolute-out {
    position: absolute;
    left: 150vw; top: 9999rem;
}

则就不行,因为此时页面会出现滚动条。

比方说下面这个demo,容器里面一个方盒子,拖动它,你会发现,如果盒子在容器左侧或上方,不会有滚动条,但是如果是超过右侧或底部,则会出现滚动条。


flex-end是反向溢出

回到本文这里,flex-end 之所以不会出现滚动条,就是因为里面内容溢出容器的方向不是在容器的下方或者右侧,而是在容器的顶部和左侧,自然就无法触发滚动条的出现。

比方说下面这个盒模型结构示意:

盒模型定位示意

可以看到,溢出的几个列表的位置是在容器的上方的,所以,没有滚动条,自然也就没法滚动了。

三、解决方法

解决方法很简单,对齐方式开始默认的 flex 对齐,然后使用名不见经传的 margin: auto 实现end对齐就可以了。

具体做法是设置第一个子项设置起始方向的 margin 属性值为 auto

代码示意:

.container {
    display: flex;
    height: 200px; width: 250px;
    flex-direction: column;
    background-color: rgba(0,0,0,.75);
    gap: 1px;
    border: 1px solid;
    overflow: auto;
}
.container item {
    padding: .5rem 1rem;
    background-color: #fff;
    flex: none;
}
/* 这里处理 */
.container item:first-child {
    margin-top: auto;
}

实时效果如下(若无效果,请访问原文地址),点击下面的按钮,动态添加列表项,可以看到,随着列表项增多,列表整体一直在底部,同时数量超过容器高度的时候,会出现滚动条,可以滚动。

列表列表列表

类似的,如果是水平列表,则可以设置 margin-left:auto

至于 margin:auto 为何可以实现底部对齐效果,在 《CSS世界》 margin:auto 那部分是有专门介绍的,在 《CSS新世界》 flex布局这个章节也有所提及,这里不具体展开,大家可以自行查阅。

四、结语

最近干活遇到类似的场景,然后想起来之前有人问过我类似的问题,说明说明遇到类似问题的人应该不止我一个,所以专门就写了这篇文章,希望可以帮到大家。

其他就没有什么好说的啦,上周末去深圳参加了GMTC全球前端开发者大会,做了个关于用户体验的主题分享,如果没有在现场或者没有看直播的人,可以关注InfoQ,应该过一段时间会放出视频。

下图是现场风采(去之前专门让家里的领导理了个发):

大会现场照片

好,以上就是本文全部内容,欢迎转发,欢迎分享!如果是在桌面端网页访问的话,分享按钮在文章的左侧。

(本篇完)

分享到:


发表评论(目前12 条评论)

  1. wwh说道:

    本地试了试(Chrome 105.0.5195.127):
    1、去掉justify-content: flex-end;之后,
    item:first-child {
    margin-top: auto;
    }
    这句加不加没区别。
    2、加上justify-content: flex-end;这句,item:first-child {
    margin-top: auto;
    }
    这句加不加也没区别。

    没太懂。

  2. siennazou说道:

    确实可以出现滚动,但是一旦出现滚动,第一个元素永远在上面。和flex-end效果不符合,需求是想能往上滚动,初始时滚动条就在最下面

    • jarda说道:

      找到合适的解决方案了吗

      • CodeHz说道:

        可以考虑这样 demo如下

        data:text/html,(a.textContent+=root.children.length,a))(this.cloneNode()),this)”>CLONE

      • CodeHz说道:

        啊,标签被过滤掉了,我还以为本站是用textContent显示的呢,那我用base64把,反正意思到了就可以
        data:text/html;base64,PGRpdiBpZD0icm9vdCIgc3R5bGU9ImRpc3BsYXk6ZmxleDtmbGV4LWRpcmVjdGlvbjpjb2x1bW4tcmV2ZXJzZTtvdmVyZmxvdy15OnNjcm9sbDt3aWR0aDoxNTBweDtoZWlnaHQ6MTUwcHg7Ym9yZGVyOjNweCBzb2xpZCBibGFjaztnYXA6MnB4Ij48ZGl2IHN0eWxlPSJjdXJzb3I6cG9pbnRlcjtiYWNrZ3JvdW5kOnJlZDt1c2VyLXNlbGVjdDpub25lIiBvbmNsaWNrPSJyb290Lmluc2VydEJlZm9yZSgoYT0+KGEudGV4dENvbnRlbnQrPXJvb3QuY2hpbGRyZW4ubGVuZ3RoLGEpKSh0aGlzLmNsb25lTm9kZSgpKSx0aGlzKSI+Q0xPTkU8L2Rpdj48L2Rpdj4=

  3. neo说道:

    flex-center也是,向左或向上溢出就不会显示在滚动范围内

  4. 码农说道:

    你例子中的container没加justify-content: flex-end啊,加了还是不出滚动条啊

  5. cz说道:

    我本地项目之前偶现这种情况,总算是明白为啥了

  6. 代码如诗如画说道:

    厉害了大佬

  7. lmfyee说道:

    绝对定位设置位置隐藏使用正值出现滚动条这个,今天在这算是明白了[捂脸]