Equal height children of flex items

by

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:

Duplicate posts:

More Related Contents:

  1. Flexbox: center horizontally and vertically
  2. CSS-only masonry layout
  3. Make container shrink-to-fit child elements as they wrap
  4. When flexbox items wrap in column mode, container does not grow its width
  5. One flex/grid item sets the size limit for siblings
  6. Why are flex items not wrapping?
  7. Make flex items take content width, not width of parent container
  8. Make background color extend into overflow area
  9. Center text over an image in flexbox
  10. Using flex order property to re-arrange items for desktop and mobile views
  11. Why can’t be flex containers?
  12. Flexbox fill available space vertically
  13. Prevent flex items from rendering side to side
  14. Rendering problems using flexbox in Firefox and Chrome 48 [duplicate]
  15. What’s the difference between flex-start and baseline?
  16. Equal space between flex items
  17. How can I make a display:flex container expand horizontally with its wrapped contents?
  18. Text not centered with justify-content: center
  19. How to stretch flex child to fill height of the container?
  20. Flexbox resize and scrollable overflow [duplicate]
  21. How can I show three columns per row?
  22. CSS object-fit: contain; is keeping original image width in layout
  23. How to center horizontally and vertically?
  24. Flexbox on IE11: image stretched for no reason?
  25. extra space when centering elements using flexbox
  26. Height is not correct in flexbox items in Chrome [duplicate]
  27. display: flex not working on Internet Explorer [duplicate]
  28. Image behavior within flexbox (rows embedded in columns)
  29. Flex items create space between them when they wrap [duplicate]
  30. Fitting child into parent

Leave a Comment