How Can I Make Unequally-Sized Headings in Separate Flex Containers Have Equal Heights?

Equal Height Children of Flex Items

Problem:
You want all the .block div's to be equal height, and the .bottom div absolutely positioned to the bottom. This works, but when the h2 heading is too long and reaches 2 lines, you want all the h2 headings of the row to be the same height.

Solution:

It is not possible to achieve this with flexbox or CSS in general.

Flexbox's default behavior is to stretch flex items to the full height of the cross axis, which is known as "flex equal height columns." However, this only applies to children of a flex container, not to elements in different containers.

In this case, the h2 headings are in different containers, so the equal height feature does not apply. Furthermore, applying a height to a flex item overrides the equal height setting.

Additional Notes:

• Equal height columns only apply to a single flex line.
• The align-self property can override align-items and break the equal height feature.
• Equal height columns do not work in multi-line flex containers.
• Equal height applies to width when the flex direction is column.

The above is the detailed content of How Can I Make Unequally-Sized Headings in Separate Flex Containers Have Equal Heights?. For more information, please follow other related articles on the PHP Chinese website!