achieving equal height columns with flexbox

Question

I am trying to build a layout which has two separate content groups: one on the left side and right side, with fixed width (20%/80%) for now. On each side, I am trying to arrang

Answer 1

When you apply height: 100% to html and body, you limit the growth of the child elements to 100% of the screen.

In your code, your .left flex item is indeed stretching to height: 100%, as specified. Add a border around .left for an illustration: DEMO

If you remove all the fixed heights, you'll enable the flex container to stretch all flex items, per the default setting: align-items: stretch (the setting that creates equal height columns). DEMO

When you add flex: 1 to the .left flex items (.litem), they then distribute all available space in the container evenly among themselves. DEMO.

In a nutshell, when you use the height property you override align-items: stretch, the flex setting for equal height columns.