CODEWITHSUNDEEP
htmlcssflexbox
Flix
Flix

Reputation: 363

Equal height flexboxes with equal height children of variable content, without JS

Blue container, gray equal height boxes, fixed height images, and variable content white boxes that should be the same height but aren't

Making the gray boxes have equal height is trivial: .blue-box { display: flex }

The images have the same height by design. The white boxes contain variable amounts of text, so they're all different heights.

Is there a way to make the white boxes of equal height, without JavaScript?

Thank you.

Upvotes: 1

Views: 117

Answers (1)

Rafał K
Rafał K

Reputation: 132

On gray boxes: display: flex; flex-direction: column;

On white boxes: flex-grow: 1;

Upvotes: 2

Related Questions