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

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;height: 100px;
}.child {width: 50px;height: 150px; /* 超出父元素高度 */background-color: orange;margin: 5px;
}

在这个示例中，我们将align-items设置为flex-end，以便将所有子元素对齐到容器的底部。我们还将overflow-y属性设置为auto，以便当子元素溢出容器时可以滚动内容。但是，由于所有子元素都靠近容器的底部，因此没有留下空间用于滚动。

如何解决这个问题？

1. 在子元素外部包裹一个容器
在每个子元素外部添加一个div容器，并将其设置为align-items:flex-end，并在父元素上添加overflow-y:auto。这样，子元素将被放置在这个新容器中，而不是直接放在父元素中，这样我们就可以滚动容器了。

<div class="parent"><div class="wrapper"><div class="child">Item 1</div></div><div class="wrapper"><div class="child">Item 2</div></div><div class="wrapper"><div class="child">Item 3</div></div><div class="wrapper"><div class="child">Item 4</div></div><div class="wrapper"><div class="child">Item 5</div></div>
</div>.parent {display: flex;overflow-y: auto;height: 100px;
}.wrapper {display: flex;align-items: flex-end;margin: 5px;
}.child {width: 50px;height: 150px;background-color: orange;
}

在这个例子中，我们将每个子元素包裹在一个名为.wrapper的新容器中，并将其设置为align-items:flex-end。然后，我们在父元素上添加overflow-y:auto，以便当子元素溢出容器时可以滚动内容。

2. 使用JavaScript解决问题
我们还可以使用JavaScript来解决这个问题。通过获取子元素的总高度并将其设置为父元素的高度，我们可以确保在子元素高于父元素时仍然可以滚动内容。

<div class="parent" id="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;height: 100px;
}.child {width: 50px;height: 150px;background-color: orange;margin: 5px;
}const parent = document.getElementById("parent");
const children = parent.children;
let height = 0;for (let i = 0; i < children.length; i++) {height += children[i].offsetHeight;
}parent.style.height = `${height}px`;