2

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;
}
ecc
  • 1,490
  • 1
  • 17
  • 42
Gratz
  • 23
  • 3
  • 1
    This is not possible without Javascript. There is no CSS mechanism to equalise heights of elements that **do not share a parent**. – Paulie_D Feb 06 '17 at 16:52

2 Answers2

-1

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

Dmitry Divin
  • 11
  • 5
  • The headings will not have the same height anymore when I do this. They should have the same height for all items and the images be displayed right after the headings. – Gratz Feb 06 '17 at 15:45
-1

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

h2 {
  flex-basis: 2em;
}

Example

Kevin Jantzer
  • 9,215
  • 2
  • 28
  • 52