bootstrap equal-height columns with flexbox ultimate solution for mobile safari and IE11

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

<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>

the sass css that solve my issues is:

.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`
		}
	}
}

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.

	flex-direction: column; // FF 47-
	-webkit-flex-direction: row; // iOS safari
	-ms-flex-direction: column; // IE11

Leave a Reply