flexbox equal height child columns

[grimski]

I actually think I’ve got this but I’d be interested to know peoples thoughts on my approach and if there’s an easier way?

Basically put, I have 2 columns and with in each columns is a div which contains content of different lengths. The inner div has a background colour so the columns appear uneven.

Here’s a CodePen example: http://codepen.io/moy/pen/zBZbzQ

As you can see i’ve applied display: flex to the 2 columns as well as their parent div. I’ve then set flex: 1 onto child div’s with the colour background to stretch it …is this right, or does someone have a better approach?

I’ve also noticed my heads are centred when I do this. Caused by the margin: 0 auto 20px; is there a way to prevent this in flex? Or would I need to set a width/remove the auto margin?

Thanks in advance!

[Paulie_D]

Sure, just remove the margin (which is what makes flexbox work) and the hgroup div will automatically expand to 100% wide.

http://codepen.io/Paulie-D/pen/WxpWWN

[grimski]

Thanks @Paulie_D. Everything else is ok is it? Having display: flex declared on both parent divs?

[Paulie_D]

Sure it’s fine.

[Author]

Posts