Flexbox-在项目内部垂直对齐未知高度的元素

Question

在flexbox项目中给一个元素相同的高度是没有问题的，但我不能让它与多个项目一起工作。

Fiddle：https://jsfiddle.net/no9jkj7m

您可以看到，对于前两个项目，它可以正常工作：h2标题具有相同的高度。但是，如果下面的内容标题的高度与前两项一样可变，则这将不再有效。

最后两个项目的标题应具有相同的高度，并且图像应与顶部对齐(标题下方没有间距)。

谢谢你的帮助。

ul {
display: flex;
}
li {
box-sizing: border-box;
display: flex; 
padding: 15px;
width: 50%;
}
.inner {
background-color: #FAFAFA;
display: flex;
flex-direction: column;
padding: 10px;
width: 100%;
}
h2 {
flex: 1 1 auto;
}

Answer 1

尝试从<h2>中删除flex并添加flex-basis: 2em

h2 {
flex-basis: 2em;
}

示例

Answer 2

从h2中删除"flex:1 1 auto；"。因为您设置了flex选项，所以您的h2元素会调整他的高度并增加大小，从而向下推图像。您可以在此处找到详细解释：https://developer.mozilla.org/ru/docs/Web/CSS/flex