在使用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，以便当子元素溢出容器时可以滚动内容。但是，由于所有子元素都靠近容器的底部，因此没有留下空间用于滚动。
如何解决这个问题？
虽然Flexbox布局中的align-items:flex-end属性可能会导致滚动问题，但是有几种方法可以解决它：
1. 使用margin-bottom代替align-items:flex-end
在某些情况下，我们可以使用margin-bottom来代替align-items:flex-end。通过将子元素的margin-bottom设置为auto，我们可以让它们自动向上推，直到填充容器的所有空间，并留下足够的空间以便滚动。
.parent {
display: flex;
flex-direction: column; /* 将主轴方向改为垂直 */
overflow-y: auto;
height: 100px;
}
.child {
width: 50px;
height: 150px;
background-color: orange;
margin: 5px 0 auto; /* 将margin-bottom设置为auto */
}
2. 在子元素外部包裹一个容器
另一种方法是，在每个子元素外部添加一个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，以便当子元素溢出容器时可以滚动内容。
3. 使用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`;
在这个例子中，我们使用JavaScript获取parent元素的所有子元素的总高度，并将其设置为parent元素的高度。
总结
在Flexbox布局中，当我们将align-items设置为flex-end时，可能会遇到无法滚动的问题。但是，有几种方法可以解决这个问题，包括使用margin-bottom代替align-items:flex-end、在子元素外部包裹一个容器或使用JavaScript来解决这个问题。我们应该根据具体情况选择最合适的解决方案。
