Flexbox grid column wrapping bug

[zalog]

With flexbox enabled, please take a look at this in IE10+ all browsers:

<div class="container">
    <div class="row">
        <div class="col-xs-7">
            <div class="bg-primary">content</div>
        </div>
        <div class="col-xs-5">
            <div class="bg-primary">sidebar</div>
        </div>
    </div>
</div>

This is what i get:

[cvrebert]

Assuming the bug doesn't occur in other browsers, this line should have an // IE10+ comment to note why it's necessary.

[neilhem]

Without setting max-width this bug occurs in Firefox too.

[zalog]

Yes, it's a flexbox grid column bug.
This is happening also in firefox when a child content element of .col-* is wider than the col itself. Even if with a .img-fluid inside, but much bigger than its .col-* parent.
You can try this:

<div class="container">
    <div class="row">
        <div class="col-xs-7">
            <img src="http://dummyimage.com/700x100/" alt="alt" class="img-fluid">
        </div>
        <div class="col-xs-5">
            <div class="bg-primary">sidebar</div>
        </div>
    </div>
</div>

[bassjobsen]

Notice the issues happens not only on the grids, but also before the breakpoints.

Your html can look like:

<div class="col-sm-6"></div>

Now the following CSS code should fix the issue:

@media (min-width: 544px) {
  .col-sm-6 {
    width: 50%;
    max-width: 50%;
  }
}  

The above do not fix the issue for screens smaller than 544px;. So to fix for smaller screens too the compile code for the .col-sm-6 should be as follows:

.col-sm-6 {
  max-wdith: 100%;
} 
@media (min-width: 544px) {
  .col-sm-6 {
    width: 50%;
    max-width: 50%;
  }
}  

Example can also be found here: https://github.com/bassjobsen/bootstrap/blob/patch-32/docs/examples/dashboard/dashboard.css#L143

The max-width: 100%; is not needed when your columns get a "fixed" .col-xs-12 by default.

Finally notice that min-width: 0; still seems to fix the issue too. See also: #18688

alternative fix:

@mixin make-col($gutter: $grid-gutter-width) {
  position: relative;
  @if not $enable-flex {
    float: left;
  } @else {
    min-width: 0;
  }
  min-height: 1px;
  padding-left:  ($gutter / 2);
  padding-right: ($gutter / 2);
}

[mdo]

Problem doesn't impact Safari or Chrome, at least on Mac. Confirmed that this fixed it in Firefox Mac though, so merged. Comment added in dfae3d4.

[takeradi]

I also had to use a width: 100% in .row. I had four Bootstrap 4 cards in a row with a .col-lg.6 class on each of them. The row didn't even occupy 100% of the width so I had to fix the row first and then solve the wrapping issue with max-wdith