sun qingyao sun qingyao - 2 months ago 16
CSS Question

Mysterious blank space appears in flexbox in Safari

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

enter image description here

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>




Answer

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.

There was nothing in the code that I could find to suggest a reason for this behavior.

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.

enter image description here

With the container's yellow background showing, and the first item borders not aligning with the borders of the item underneath, 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

Comments