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

最新推荐文章于 2026-06-20 09:19:29 发布

原创

最新推荐文章于 2026-06-20 09:19:29 发布 · 1.2k 阅读

标签

#css

收录于

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

在使用Flexbox布局时，我们经常使用justify-content和align-items属性来定位子元素。其中，align-items属性用于控制子元素在交叉轴上的位置，例如顶部对齐、底部对齐或居中对齐等。当我们将align-items设置为flex-end时，子元素会被放置在交叉轴的末端。

然而，当子元素超出它们所在容器的边界时，我们可能会遇到一个问题：即使我们将overflow设置为scroll或auto，也无法滚动容器内容，因为所有子元素都紧贴着交叉轴末端，没有留出空间用于滚动。

为什么overflow无法滚动？

这个问题的原因是，当我们将align-items设置为flex-end时，Flexbox容器会将所有子元素对齐到交叉轴的末端，然后沿着主轴排列它们。如果某些子元素的高度超出了容器的高度，则它们会溢出容器，并且我们无法滚动它们，因为所有子元素都靠近交叉轴末端，不留下任何空间以便滚动。

下面是一个示例，向您展示了这个问题的具体情况：

<div class="parent">
  <div class="child">Item 1</div>
  <div class="child">Item 2</div>
  <div class="child">Item 3</div>
  <div class="child">Item 4</div>
  <div class="child">Item 5</div>
</div>

.parent {
   
   
  display: flex;
  align-items: flex-end;
  overflow-y: auto