stretch flex items for equal height code example
Example: make three column with equal height using flexbox
.pseudo-three-col {
position: relative;
background: #eee;
z-index: 1;
width: 100%;
}
.pseudo-three-col .col {
position: relative;
width: 27%;
padding: 3%;
float: left;
}
.pseudo-three-col .col:nth-child(1) { left: 33%; border:solid black }
.pseudo-three-col .col:nth-child(2) { left: -33.3%; }
.pseudo-three-col .col:nth-child(3) { left: 0; }
.pseudo-three-col:before, .pseudo-three-col:after {
content: " ";
position: absolute;
z-index: -1;
top: 0;
left: 33.4%;
width: 33.4%;
height: 100%;
background: #ccc;
}
.pseudo-three-col:after {
left: 66.667%;
background: #eee;
}