10

What I have

I have some Bootstrap 3 Grid columns with different heights:

<div class="row">
  <div class="col-xs-4">Item 1</div>
  <div class="col-xs-4">Item 2 <br/> additional line
  </div>
  <div class="col-xs-4">Item 3</div>
  <div class="col-xs-6">Item 4 - This should be on a separate line</div>
</div>

Which looks like this:

Bootstrap only style

What I want

I want to add an additional class (e.g. .row-aligned) to .row to achieve that all abreast "cols" have the same height.

Which should look like this:

Cols with .row-aligned class

My attempt

Because I don't need to support old browsers I can use flexbox. My attempt is quiet easy and works in all browsers but not in Safari (version 9.1, Mac OSX 10.10):

.aligned-row {
  display: flex;
  flex-flow: row wrap;
}

I prepared a Demo here.

Safari Bug

As I said, Safari cannot handle this flexbox style and the result looks like this:

enter image description here

(I found out that adding margin-left: -1px seems to fix the issue, but it is not a good solution, because it will move everything 1 pixel left which can hide borders or something else.)

My question

Do you have any idea how I can fix this bug in Safari? Or do I use flexbox wrong? Or is there a better solution without using flexbox?

KevinH
  • 1,066
  • 1
  • 14
  • 17
  • Did you see this question and all of the various answers? http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height – Carol Skelly May 24 '16 at 15:50
  • Yes I did see that question, but no flexbox solution there worked in Safari and the other solutions weren't good either. And I also don't want to fix this with Javascript. I posted this separate question because I am more interested in understanding why flexbox doesn't work in Safari. – KevinH May 24 '16 at 16:05
  • 1
    possible duplicate: http://stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap – Michael Benjamin May 24 '16 at 16:42

2 Answers2

27

The solution is to "remove" the display: table which is set to .row::before:

.aligned-row {
    display: flex;
    flex-flow: row wrap;

    &::before {
        display: block;
    }
}

Demo

KevinH
  • 1,066
  • 1
  • 14
  • 17
0

Add a class display-flex to row as follows:

<div class="row display-flex">

And then add this CSS code.

.row.display-flex {
  display: flex;
  flex-wrap: wrap;
}

:)
.row.display-flex > [class*='col-'] {
  display: flex;
  flex-direction: column;
}
Mohammad Ayoub Khan
  • 2,422
  • 19
  • 24