Flexbox and Internet Explorer 11 (display:flex in ?)

html

responsive-design

flexbox

polyfills

byNikita Barsukov·Dec 10, 2024

In order to deal with the quirkiness of IE11 flexbox, the thumb rule is to set -ms prefixes and avoid shorthand. The properties are: display: -ms-flexbox; and display: flex;, and to enhance the flex-direction, complement it with -ms-flex-direction. Utilize min-height: 100vh; for full viewport height. Here's the crux:

.container {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-height: 100vh;
}

.item {
    -ms-flex: 1;
    flex: 1;
}

These settings ensure your flex items function as expected in IE11.

Patching-up cross-browser inconsistencies

Quick Fixes for IE's Flex Behavior

Baffling but true, IE10 and IE11 have a peculiar way of interpreting flex properties. While modern browsers use a default of flex: 1 1 0% or flex: auto, IE11 prefers flex: 0 0 auto. To bring about consistency, define the flex item's shrinking and growing behavior unambiguously:

.item {
    -ms-flex: 1 0 0; /* Strange but true IE11 fix */
    flex: 1 0 0;
}

Vertical Containers and Proper Layout

A vertical layout involving flex-direction: column, requires an assurance of IE11 conformance. This is achieved with min-height. An absolute necessity for vertical layouts:

.vertical-container {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column; /* Upwardly mobile*/
    flex-direction: column;
    min-height: 100vh; /* Full height as assured as a politician's promise */
}

Tackling Mozilla and Adjusting Heights

Mozilla Needs Special Handling Too!

Avoid letting Mozilla-based browsers inherit IE fixes that may cause disruptive behavior by using the @-moz-document url-prefix() trick:

@-moz-document url-prefix() {
    .item {
        flex: 1; /* Firefox feels flexible again */
    }
}

A Trick for Sticky Footers

For a sticky footer situation where the content area cries out to expand, appease using flex-grow:1:

.content {
    -ms-flex-positive: 1;
    flex-grow: 1; /* Growing pains for a sticky footer */
}

Making Flexbox Adapt to Screens Responsively

Adaptive Flex Flow for Wraparounds

Have you ever noticed wrapping issues with IE11? These can be conveniently resolved via -ms-flex-flow:

.wrapping-container {
    display: -ms-flexbox; /* IE's own brand of Flexbox */
    display: flex;
    -ms-flex-flow: row wrap; /* It's a wrap, people! */
    flex-flow: row wrap;
}

Polyfills—A Magic Potion for Older Browsers

Many older browsers lack flexbox support, which calls for the use of Polyfills or fallback styles. With feature-detection tools like Modernizr, you can craft conditional styles:

.no-flexbox .container {
    /* It's a bird, it's a plane...no, it's a fallback style! */
}

All-tester Browser Testing and Handy Tools

Don’t Forget—Test, Test, Test!

Test your layouts rigorously across a plethora of browsers— IE11, Chrome, Firefox, Safari, and others. You might uncover unexpected quirks that need slight adjustments or vendor-specific styles.

Compatibility Tools—Your Crystal Ball into Browser Support

For an expansive compatibility view, turn to tools like caniuse.com. This resource provides a currency-updated support matrix capturing the compatibility across varied browsers and features, inclusive of Flexbox.

explain-codes / Html / Flexbox and Internet Explorer 11 (display:flex in ?)

Linked

How to make a floated div 100% height of its parent?



Why don't flex items shrink past content size?



Extra space under textarea, differs along browsers



Horizontal list items



Float:left; vs display:inline; vs display:inline-block; vs display:table-cell;

