Equal height children of flex items

Question

I'm having a problem creating a flexbox responsive grid and was hoping that someone can point me to the right direction.

I want all the .block div's to be equal height, and the .bottom div absolutely positioned to the bottom. This is actually working in the current solution, but when the h2 heading is too long and reaches 2 lines, I want all the h2 headings of the row to be the same height.

Is this possible in some way?

I made a Codepen to illustrate the problem: http://codepen.io/kenvdbroek/pen/eZKdEQ

Answer 1

This is not possible with flexbox or CSS, in general.

An initial setting of a flex container is align-items: stretch. This causes flex items to expand the full length of the cross axis. This is what is known as "flex equal height columns".

Here are a few notes to keep in mind:

• Equal height columns apply only to the children of a flex container. In other words, the flex items must have the same parent. Otherwise, the equal height feature doesn't apply.

Your question:

I want all the h2 headings of the row to be the same height. Is this possible in some way?

Not with CSS. Because the h2's exist in different containers, they aren't siblings (they're more like cousins), so equal heights don't apply.

• Equal height columns in flexbox apply only to one flex line. Items on other lines, created by wrapping, establish their own equal height line. This means that equal height columns do not work in a multi-line flex container.

• The align-self property can be used on individual flex items to override align-items, which can break the equal height feature.

• By specifying a height on a flex item (e.g. height: 300px), both align-items and align-self are overridden for that item, and the equal height setting is ignored.

• This post focuses on a container with flex-direction: row. If the container is flex-direction: column, then equal height becomes equal width. Here's a detailed review: Make flex items take content width, not width of parent container

More details:

• Equal height rows in a flex container
• How to disable equal height columns in Flexbox?

Duplicate posts:

• How to get header from cards or similar to have the same height with flex box?
• CSS - How to have children in different parents the same height?
• Positioning content of grid items in primary container (subgrid feature)
• Align child elements of different blocks
• CSS only solution to set MULTIPLE “same height” row sections on a responsive grid
• Aligning the child elements of different parent containers