I've struggled a lot trying to use flexbox to create equal-height boxes.
As we know flexbox is not really well implemented expecially on mobile safari and IE11
The situation is the classical bootstrap with some columns with bootstrap classes
[html]
<div class="row eq-height">
<div class="col-sm-6 col-md-4">bla bla bla</div>
<div class="col-sm-6 col-md-4">bla bla bla</div>
<div class="col-sm-6 col-md-4">bla bla blabla bla</div>
<div class="col-sm-6 col-md-4">bla bla blabla bla blabla bla blabla bla bla</div>
<div class="col-sm-6 col-md-4">bla<br /><br /> bla<br /> bla</div>
<div class="col-sm-6 col-md-4">bla bla bla</div>
<div class="col-sm-6 col-md-4">bla bla<br /> bla</div>
<div class="col-sm-6 col-md-4">bla bla bla</div>
<div class="col-sm-6 col-md-4">bla bla bla</div>
</div>
[/html]
the sass css that solve my issues is:
[css]
.eq-height {
@media (min-width:$screen-sm-min) {
display: flex;
flex-wrap: wrap;
}
& > [class*='col-'] {
background-clip: content-box;
@media (min-width:$screen-sm-min) {
display: flex;
flex-wrap: wrap;
flex-direction: column; // FF 47-
-webkit-flex-direction: row; // iOS safari
-ms-flex-direction: column; // IE11
}
}
&:before,
&:after {
@media (min-width:$screen-sm-min) {
content: normal; // IE doesn't support `initial`
}
}
}
[/css]
gulp + sass generate all browser prefixes but I added different flex-direction for different browsers on col-* classes. That's my solution that do the magic on safari, chrome, firefox and IE11.
[css]
flex-direction: column; // FF 47-
-webkit-flex-direction: row; // iOS safari
-ms-flex-direction: column; // IE11
[/css]
