如何避免Flexbox兄弟元素影响内部子元素高度（无绝对定位）

问题根源 #

当.wrapper作为外层Flex容器时，默认的align-items: stretch会让所有子元素（包括.parent）拉伸至与最高子元素（.sibling）等高。而.parent作为内层Flex容器，同样默认align-items: stretch，导致.child被拉伸至.parent的高度，超出了.childcontent的固定高度。

可行解决方案 #

根据需求，提供两种无需绝对定位、无需手动固定元素高度的方案：

方案1：让.parent保持自身内容高度

给.parent添加align-self: flex-start属性，修改其在.wrapper交叉轴上的对齐方式，避免被拉伸至与.sibling等高：

.parent {
  align-self: flex-start;
}

此时.parent的高度将由内部.child（即.childcontent的高度）决定，.child不会被额外拉伸，且.child高度会随.childcontent的属性变化自动同步。

方案2：保持.parent与.sibling等高，但.child保留原高度

若需要.parent占据.wrapper的完整高度，仅让.child保持原高度，给.parent添加align-items: flex-start属性，修改内层Flex容器的交叉轴对齐方式：

.parent {
  align-items: flex-start;
}

这样.child作为.parent的Flex子元素，不会被拉伸，高度完全由.childcontent决定，同时.parent仍保持与.sibling相同的高度。

说明 #

两种方案均无需手动设置.child的高度，只要调整.childcontent的属性（如修改固定高度），.child的高度会自动同步更新，完全符合需求。

内容的提问来源于stack exchange，提问作者Steven Shoemaker