1

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.

Flix
  • 345
  • 4
  • 13

1 Answers1

2

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

On white boxes: flex-grow: 1;

Rafał K
  • 122
  • 7
  • 2
    I think you mean to stretch the white boxes to consume available space. For it to work vertically, however, you would need to add `flex-direction: column` to the container. Regardless, I don't believe that's the question, which appears to be asking for equal height columns, not how to fill available space. – Michael Benjamin Dec 10 '16 at 01:44
  • Yes, I did the `flex-direction` and it works beautifully. Such an simple and elegant solution. – Flix Dec 10 '16 at 01:49
  • 1
    That was my original answer, which I deleted because on a second reading of your question, it appeared you were actually asking for equal height for the white boxes, which is different than consuming free space. [It's also not possible in CSS.](http://stackoverflow.com/q/36721216/3597276) – Michael Benjamin Dec 10 '16 at 01:51
  • It works in this scenario, which is what I needed. I also learned about the very-useful `flex-grow`. – Flix Dec 10 '16 at 02:03
  • Added `flex-direction: column` to my answer. – Rafał K Dec 10 '16 at 02:22