Flexbox - Align elements of unknown height vertically inside items [duplicate]

问题

This question already has answers here:

Equal height children of flex items (2 answers)

Closed 2 years ago.

It's no problem to give one element the same height inside flexbox items but I can't get it work with more than one item.

Fiddle: https://jsfiddle.net/no9jkj7m

You see that for the first 2 items it works as it should: the h2 titles have the same height. But this doesn't work anymore if the content below the headings has variable height like in the last 2 items.

The headings for the last 2 items should have the same height and the images should be aligned to the top (without spacing below the headings).

Thanks for your help.

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

回答1:

Try removing flex from your <h2> and adding flex-basis: 2em

h2 {
  flex-basis: 2em;
}

Example

回答2:

Remove "flex: 1 1 auto;" from h2. Because you set flex option, your h2 element adjust his height and grows in size,pushing images down. You can find detailed explanation here: https://developer.mozilla.org/ru/docs/Web/CSS/flex

来源：https://stackoverflow.com/questions/42071516/flexbox-align-elements-of-unknown-height-vertically-inside-items