Flex box with collapsed height
By default, flex box makes item elements inherit the height of their container. To disable this behavior, and collapse item heights, use align: start
(or the proper variation there-of).
.row {
/* flex box */
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/* align start, disable vertical height */
-webkit-box-align: start;
-moz-box-align: start; /* FF <=20 */
-ms-flex-align: start; /* IE10 */
-webkit-align-items: flex-start;
align-items: flex-start;
}
Check out this Pen!