Mysterious blank space appears in flexbox in Safari

Question

I'm trying to align grid columns vertically according to this answer. However, the top-right corner of the output is a piece of mysterious blank, and I have no idea how to fill it.

This is what I see in my browser (Safari Version 9.1.2 (11601.7.7)):

Here is my code:

.equal {
  display: flex;
  flex-wrap: wrap;
}
.equal > div[class^='col-'] {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 768px) {
  .equal2,
  .equal2 > div[class*='col-'] {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex: 1 0 auto;
  }
}

<!DOCTYPE html>
<html>

<head>
  <!-- Bootstrap -->
  <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div class="container">
    <div class="row equal">
      <div class="col-xs-6 col-lg-4">
        <p style="word-wrap: break-word;">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
          <p>
      </div>
      <div class="col-xs-6 col-lg-4">
        <p style="word-wrap: break-word;">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
          <p>
      </div>
      <div class="col-xs-6 col-lg-4">
        <p style="word-wrap: break-word;">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
          <p>
      </div>
      <div class="col-xs-6 col-lg-4">
        <p style="word-wrap: break-word;">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
          <p>
      </div>
      <div class="col-xs-6 col-lg-4">
        <p style="word-wrap: break-word;">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
          <p>
      </div>
      <div class="col-xs-6 col-lg-4">
        <p style="word-wrap: break-word;">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
          <p>
      </div>
      <div class="col-xs-6 col-lg-4">
        <p style="word-wrap: break-word;">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
          <p>
      </div>
    </div>
  </div>
</body>

</html>

You can re-create this across other browsers by [placing a different character in the content of the pseudo-element clearfix.](https://jsbin.com/zixabu/edit?html,css,output). Removing that pseudo-element fixes the problem. — misterManSam, Sep 25 '16 at 23:45

Michael Benjamin · Accepted Answer · 2016-12-05T17:50:41.457

So this is an unusual situation which appears to be unique to Safari.

But with a gazillion Bootstrap styles in play, weird things can happen.

You have a group of flex items (div[class^="col-"]) in a row wrap container (row equal).

Each item has a width: 50%, box-sizing: border-box and margin: 0, all applied by Bootstrap.

With padding and borders included in the 50%, and no margins, two items will fit in each row and every third item will wrap. That's what happens in Chrome, Firefox, IE11 and Edge.

In Safari, however, the second flex item is wrapping, leaving a big open space in the first row.

In a cursory review of the code, there was nothing I could find to suggest a reason for this behavior. (I didn't troubleshoot every Bootstrap style applied.)

But a close inspection of the rendered layout reveals a tiny gap (maybe 1px) in the left margin area of the first item.

This extra space, which appears only in Safari and only next to the first flex item, forces the second item to wrap.

Referring to the image above, with the container's yellow background showing, and the borders not aligning in the first column, the misalignment is clear.

So I think that identifies the problem.

In terms of a solution, the best I can suggest at this point is to reduce the size of the first item by 1-2 pixels, or apply a negative margin-left of the same amount. Something along these lines:

.equal > div[class^='col-']:first-child {
     width: calc(50% - 1px);
}

revised fiddle

Thank you! As a feedback, applying `width: calc(50% - 1px);` produces another weird layout: [screenshot](http://i.stack.imgur.com/y1s53.png), but `margin-left: -1px;` just gives me the expected result: [screenshot](http://i.stack.imgur.com/rSUvd.png). — nalzok, Sep 25 '16 at 23:15

Mysterious blank space appears in flexbox in Safari

1 Answers1