Bootstrap: Grid system broken with flex and IE10-11

[ezramorse]

The following code block renders on two lines when compiling the SASS stylesheet with option:
$enable-flex: true !default;

<div class="container"> <div class="row"> <div class="col-sm-6"> One of Two Columns </div> <div class="col-sm-6"> Two of Two Columns </div> </div> </div>

[kkirsche]

Per CONTRIBUTING.md, bug reports should include an isolated example of the problem with instructions (as necessary) for us to reproduce the problem. This would greatly assist us in debugging

Thanks for your understanding and cooperation!

Per the browser compatibility section we reference Can I Use, which state there are the following known issues:

• In IE10 and IE11, containers with display: flex and flex-direction: column will not properly calculate their flexed childrens' sizes if the container has min-height but no explicit height property. See bug.
• IE11 does not wrap long paragraphs of text
• IE11 will not apply flexbox on pseudo-elements.
• IE 11 incorrectly focuses a child element if the parent uses display:flex and has a tabindex set

[ezramorse]

If you remove the left and right padding from the columns, the grid layout will be corrected in IE11.
http://output.jsbin.com/vicamaviyo/1/

For a temporary workaround on IE 11, if you are not needing wrapping (using less than 12 columns per row), change flex-wrap on row to "nowrap".
http://output.jsbin.com/ziyorijuli/1/

[slavanga]

It looks like we're hitting this bug:
https://github.com/philipwalton/flexbugs#7-flex-basis-doesnt-account-for-box-sizingborder-box

Using width: 50% instead of flex-basis: 50% would solve this issue in IE10 and 11.

[neilhem]

How about max-width property with flex-basis? Like:

.col-md-6 {
  flex: 0 0 50%;
  max-width: 50%;
}

[johanhar]

Yeah, the box-sizing: border-box is ignored by IE11 when using flex. See link from @slavanga for more info...

If you create an example and compare IE11 with something like Chrome, and then go to Chrome and change to content-box you'll see that also Chrome will be broken and they look exactly the same...

[johanhar]

As @neilhem suggest, it seems to work (haven't tested for very long yet) when setting the max-width equal to flex-basis:

.col-xs-1 {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 8.33%;
    max-width: 8.33%;
}

[IceReaper]

Using currently this in my project to get around that - works perfectly.

// IE 11 flexbox fix.
// TODO: Remove when fixed in bootstrap.
// https://github.com/twbs/bootstrap/issues/17310
@if $enable-flex {
    @each $breakpoint in map-keys($grid-breakpoints) {
        @include media-breakpoint-up($breakpoint) {
            @for $size from 1 through $grid-columns {
                .col-#{$breakpoint}-#{$size} {
                    max-width: percentage($size / $grid-columns);
                }
            }
        }
    }
}

[johanhar]

Thanks @IceReaper :+1:

[alexkerr]

Thanks @IceReaper - also using this fix

[cvrebert]

CC: @mdo

[artifactdev]

It seems that this bug also appears in Firefox.

[cvrebert]

@artifactdev I can't reproduce with http://output.jsbin.com/lasiwu on Firefox 44.0a2

[artifactdev]

@cvrebert it seems that only firefox > 42 is affected by this bug.

[cvrebert]

@artifactdev Erm, 44 > 42, yet I couldn't repro.
[Edit: Couldn't repro with Firefox 42 or 41 on Sauce Labs either.]

[ghost]

Same problem.

The issue can be seen on this codepen http://codepen.io/ncerminara/pen/EjqbPj/
Open it in IE 11 and switch from Float Grid to Flexbox Grid.
max-width fixes it

[bassjobsen]

https://github.com/twbs/bootstrap/pull/17756 solves this? also see: https://github.com/twbs/bootstrap/issues/18688

[mdo]

Fixed with #17756.

[t-wales]

thanks @IceReaper you just saved my job.