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 thealign-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, usevisibility: hidden
.
Revised Fiddle