Flexbox - 在项目内垂直对齐未知高度的元素[重复]

给予是没有问题的一个元素Flexbox 项目内的高度相同，但我无法让它与多个项目一起使用。

Fiddle: https://jsfiddle.net/no9jkj7m https://jsfiddle.net/no9jkj7m

您会看到，对于前 2 个项目，它的工作原理如下：h2 标题具有相同的高度。但如果内容below标题的高度可变，就像最后两项一样。

最后 2 项的标题应具有相同的高度，并且图像应与顶部对齐（标题下方没有间距）。

感谢您的帮助。

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;
}

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

h2 {
  flex-basis: 2em;
}

Example https://jsfiddle.net/no9jkj7m/1/