Responsive equal height divs css

[idm]

Hi

http://codepen.io/anon/pen/GqpvNv

I’m struggling to get the height of block 2 and 3 the same height as block 1.
I would like blocks 2 and 3 to be the same height – both matching the same height as block 1.

Hope that makes sense.

I tried min height but then it doesn’t work responsively. I tried % height which also didn’t work.

Can anyone help me please?

Many thanks

[Paulie_D]

Not impossible with flexbox but it’s messy and you need to know the height of the wrapper.

[idm]

Hi

Thanks for the reply. The maximum height of the row will be 250px…
how would it be done?

Thanks

[Paulie_D]

Something like this

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

[idm]

Awesome!! thank you so much. Flexbox is great.

Thanks again

[idm]

would it be possible to have the height respsonsive as well as the width?

[Paulie_D]

Not as far as I know….but you could try.

[amanda_]

Use

max-height: 100vh; 

or something of the like for vertical responsiveness.

[idm]

Brilliant many thanks! got it working now.

[Author]

Posts