Equal height rows in flex-direction: column

You can just wrap those flexbox columns in another flexbox that's a row, there's no reason you can't have items be both flexboxes and flex items.

#container {
  display: flex;
}

#container .col {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  background: grey;
}

<div id="container">
  <div class="col">
    <a href="">asdf</a>
    <a href="">asdf</a>
    <a href="">asdf</a>
  </div>
  <div class="col">
    <a href="">asdf</a>
    <a href="">asdf</a>
    <a href="">asdf</a>
  </div>
</div>

https://jsfiddle.net/1dp87bm2/1/

The flex equal height columns feature – which is the result of align-items: stretch, a default setting of a flex container – applies only to flex items on the same row.

It doesn't work for items in a multi-line flex container. This behavior is defined in the spec:

6. Flex Lines

In a multi-line flex container (even one with only a single line), the cross size of each line is the minimum size necessary to contain the flex items on the line (after alignment due to align-self), and the lines are aligned within the flex container with the align-content property.

In other words, when there are multiple lines in a row-based flex container, the height of each line (the "cross size") is the "minimum size necessary to contain the flex items on the line".

In addition, because align-items: stretch works along the cross-axis, the equal height columns feature is useless in flex-direction: column, where the cross-axis is horizontal.

To achieve equal height columns/rows across multiple lines consider a Javascript solution.

However, without knowing much about your overall objective, here's a simple way to achieve equal height rows in your current layout:

Add duplicate content in both divs. In the .component.left div, use visibility: hidden.

Revised Fiddle