Css Flexbox align self正在更改div'；s高度

我有一个像这样的flexbox设置

.container {
display: flex;
min-height: 300px !important;
}
.space-between {
justify-content: space-between;
}
.align-end {
align-self: flex-end;
}
.align-center {
    align-self: center;
}

<div class="container space-between">
        <div class="child" style="max-height: 100px"></div>
        <div class="child yellow-div" style="max-height: 50px"></div>
        <div class="child blue-div" style="max-height: 150px"></div>
        <div class="child pink-div"></div>
</div>

.container{
显示器：flex；
最小高度：300px！重要；
}
.间隔{
证明内容：之间的空间；
}
.对齐末端{
自对准：柔性端；
}
.居中对齐{
自对准：居中；
}

问题是，当我尝试通过应用“将端点对齐到子对象2”和“将中心对齐到子对象3”来设置“将自身对齐到端点”或“将中心对齐到子对象3”时，它会更改所应用的子对象的高度。

---

有没有解释为什么会发生这种情况以及可能的解决方法？感谢

align self

的默认值为

auto

，这意味着它将获得父flex容器的

align items

，父flex容器的默认值为

stretch

，并且由于子#2具有

最大高度：50px

，因此它只能拉伸到50px。当您将

align self

值更改为其他值时，child#2不会拉伸，其

高度

可能会获得其

最小高度

或其子级的高度

---

检查这把小提琴，看看当你改变孩子2的

align self

没有定义的高度时会发生什么。

除非我们指定一些

align

属性，否则它将默认为

auto

，这将拉伸内容以填充弹性体

因此，在您的情况下，一旦更改了

align

属性，如果没有应用特定的高度，它会将其高度更改为

auto

（采用内容高度）

请检查下面的代码片段。我已将

align self

应用于所有子项，然后将第二个子项的值更改为

stretch

.container{
显示器：flex；
最小高度：300px！重要；
}
.间隔{
证明内容：之间的空间；
}
.孩子{
宽度：100px；
边框：1px点红色；
自我校准：基线；
}
.对齐末端{
自对准：柔性端；
}
.居中对齐{
自对准：居中；
}
黄分区{
背景：黄色；
自对准：柔性端；
}
.黄色分区+分区{
自我调整：伸展；
}
蓝色分区{
背景：蓝色；
自对准：居中；
}
.粉红色分区{
背景：粉红色；
}

使用您在此处定义的CSS添加工作代码段。您给定的代码没有生成您在图中显示的确切场景此处有一个指向要点的链接--请发布足够的代码来重现问题您在自动/拉伸上的解释帮助我理解了问题。我有另一种方法