Make flexbox divs wrap content vertically - css

Question

I am trying to get three flex box divs placed next to each other in a row.
<div style="display: flex; flex-direction: row">
<div style="flex:1; border: 1px solid #ccc;">1<br />A<br />B<br />C<br />D<br />E</div>
<div style="flex:1; border: 1px solid #ccc;">2</div>
<div style="flex:1; border: 1px solid #ccc;">3</div>
</div>
Here, I have not applied any height style to the child divs but they show up like
Notice that the div with content 2 and 3 have assumed the height of 1st division with content, 1ABCDE
Fiddle of the above code
https://jsfiddle.net/4oddowjw/4/
I want it to look like this but I do not have the luxury to use height on these divs
I cannot specify the height. As in my application, height is dynamic and applied to children of these flex boxes.
Is there a way to make these divs wrap their content vertically ?
I tried adding 'height: auto' to the divs but it did not work out
Example with 'height: auto' applied https://jsfiddle.net/4oddowjw/5/

Answer 1

You have to add align-items:flex-start; to the container:
.container {
align-items:flex-start;
display: flex;
flex-direction: row;
}
.item {
flex:1;
border: 1px solid #ccc;
}
<div class="container">
<div class="item">1<br />A<br />B<br />C<br />D<br />E</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
Your updated fiddle: https://jsfiddle.net/4oddowjw/7/
Explanation:
The default alignment of the container items is stretch. All the items has the equals height. If you want to wrap the items by content you have to overwrite this default value on the container with align-items:flex-start;.
More information about flexbox you can find here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
The official W3C specification: https://drafts.csswg.org/css-flexbox-1/#align-items-property