flex layout question

[encarnacion]

I started with this basic layout, and my goal is to have the yellow box be the full height of the 2 boxes to the left of it. I know this layout is possible with other CSS solutions, but I’m interested in a flex solution.

https://codepen.io/daspirom/pen/eLQjKB

[cleverquestion]

Here is a resource to help if your purely going with flexbox: http://www.lottejackson.com/learning/an-equal-height-grid-using-flexbox

Personally I think it’s easier to just use columns: https://codepen.io/cleverquestion/pen/gdQBrm

[Paulie_D]

You can’t do that using flexbox….without wrapping the two left divs in their own wrapper so that can be the same height as the right element.

[smcghee]

Yes, you can do this as long as a height is set on the container, and the flex direction is set to column.
https://codepen.io/smcghee/pen/RYvqdM

[encarnacion]

Hi! Thanks for the advice and tips. I’m still unclear as to how that works with setting the height – as am trying to limit the width results in 3 columns…

I appreciate all the responses, thanks!

[Paulie_D]

That’s why flexbox is not the best option here.

Firstly you have to set the parent to column wrap and limit the height (which means you need to know how high each element is) so that the parent knows when to wrap…and to complicate matters, since your yellow box is 2nd and it needs to be last, you need to play with the order.

Oh, and I forgot, you need to set the widths too! Oh, wait…and there will be overflow to deal with also.

Finally, did I mention that this method doesn’t allow you to equalise the height of the left column to the right ones.

https://codepen.io/Paulie-D/pen/XPLEjE

[encarnacion]

Thanks!

[Paulie_D]

For the actual flexbox solution you need to wrap the left side divs in their own container like so.

https://codepen.io/Paulie-D/pen/XPLEjE

[iosman]

Hi after reading your blog I have finally found some knowledge which
I was looking for so long for that reason Thanks.

[Author]

Posts