How can I make a half-half layout with some text using display: flex?

Question

I want to make a half-half layout. So I made a <div> that had display: flex; and put two children that had flex-grow: 1;. It looked like what I expected, a half-half layout. But when I put something in one of the children, it got larger than the other.

I can’t quite grasp why it works this way. http://codepen.io/anon/pen/rOvpPM

Could you please tell me the why and the proper CSS for it?

Answer 1

Flexbox works that way. If you have two elements (or any amount of elements) in a flex-box, and give them all the same flex-grow, they will all 'grow' the same amount.

If you have a parent flex container with a width of 300px, with two children; one with a width of 0px, and another with 100px, both will grow an additional 100px, resulting in a 100px and a 200px div.

If you want them both to be 50% of the width, just add

width: 50%;

and remove

flex-grow: 1;

from the CSS.

Hope this helps