by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=10220 鑫空间-鑫生活
本文欢迎分享与聚合，全文转载就不必了，尊重版权，若急用可以联系授权。

一、问题描述

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

实时渲染效果如下所示：

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

但是，如果列表项很多，比方说有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，子元素的内容高度也溢出了容器，为什么无法滚动呢？

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

二、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，应该过一段时间会放出视频。

下图是现场风采（去之前专门让家里的领导理了个发）：

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

本文为原创文章，欢迎分享，勿全文转载，如果实在喜欢，可收藏，永不过期，且会及时更新知识点及修正错误，阅读体验也更好。
本文地址：https://www.zhangxinxu.com/wordpress/?p=10220

（本篇完）