Currently I have only the flexibility.js script called for in my page. However, upon reading the support section, it looks like perhaps there are other scripts that are needed to get Flexibility to fully work? Files such as css-layout.js. Is this the case, do I need all the dependencies?

Tested in IE 9.0.8xxx on a Windows 7 machine, the polyfill is used with justify-content:center and align-items:center on a single flex item. It appears to be centering vertically but not horizontally.

See codepen below,

http://codepen.io/benweiser/pen/qbRWjZ
http://codepen.io/benweiser/live/qbRWjZ

As we know IE 11 does not vertically align items correctly when min-height is used. See bug

Is flexibility.js fix this issue?

Seem to be getting this error in IE8:

Invalid Argument
Line: 2
Char: 1083

Not sure what's causing it. I've replaced all instances of

display: flex;

with

-js-display: flex;
display: block;
display: flex;

Am I misunderstanding something?

I am not sure if this has been looked into already or not.. But I thought a possible discussion about possibly re-using facebooks css-layout would be a good idea at this stage in the project.

https://github.com/facebook/css-layout

They already have a pretty stable implementation as far as I can tell - and is being used in react-native for rendering.

The main difference I can see is that - the flexibility.transform seems to be using margins while the css-layout provides absolute positions for all nodes.

When the content of flex items run to different lengths the height of the smallest item appears to be used across all items.

Using the latest 1.0.6 version of dist/flexibility.js from the master branch.

Expected (Chrome):

Actual (IE9):

CSS:

.b {
  -js-display: flex;
  display: flex;
}
.bi {
  border: 1px solid red;
  padding: 10px;
  width: 100%;
}
.b1 {
  flex: 2;
}
.b2 {
  flex: 1;
}

Demo: http://output.jsbin.com/luyoka

The docs don't seem to mention this. I tried appending the -js- prefix to everything but nothing works. Only js-display:flex works.

Let me start off with saying that this is fantastic. A polyfill for flexbox is what is missing to make my life complete (as a webdev).

I just wanted to add this here so it doesn't get forgotten: "justify-content: space-between;" would be nice, it does wonders for some layouts.

hello,
I'm making my grid system http://mosne.it/playground/mosne-flexbox/
and is working good! So first of all thank you!
I've found a workaround for supporting flex-basis: ie9 and ie10 need a specified width,
starting from ie11 it has to be max-width
.col-1-3{ flex: 0 0 33.333333333333%; max-width:33.333333333333%;}
.no-flexbox .col-1-3{ width:33.333333333333%;}.
I was wondering if it would be possible to integrate this in your polyfill walker
so i can make a smaller css. thank you

In my testing through Browserstack I get a strange behaviour with flexibility enabled on IE10 and 9 (and 8): http://codepen.io/anon/pen/vLzVOQ

Try activating/deactivating the js-display rule, you'll see the absolute element moves. I'm not sure why it does that but it's strange that it also affects IE10 when it doesn't affect IE11...

Might be an issue with how the CSS is ordered but I'm really not sure. It seems like it's only happening to absolutely positioned elements inside an element with flex.

Without

With

IE9,IE10 no support,noly support IE8

Flexibility is a very useful work. I will continue focus on it !

And I want use it in our company business. so, i tested this example in ie8 ie9 ie10 and chrome.

See below:

ie8 nowrap doesn't work with space-around

Chrome:

IE8:

IE9,10 nowrap doesn't work anywhere

Chrome:

IE9:

IE10:

There is a 1.0.6 tag on GitHub but only v1.0.5 been published on npm.

Just a thought. Would it be feasible and relevant to use the cascading variables syntax, aka --js-display, rather than a kind-of-vendor-prefix?

Technical difficulties I can think of:

1. If IE 8 and/or 9 discards properties starting with (or containing) -- and the script cannot detect them, that's a no-go.
2. Some *-to-CSS processors may treat cascading variables as static variables and strip them.

It would be helpful if the build process built both a minified and unminified file, for providing hosts such as WordPress VIP that minify JS files.

IE9 crashes with follow error message

The browser is Swedish, so the error message is also in Swedish, but it says the currentStyle: object is null or undefined.

SCRIPT5007: Det går inte att hämta värdet för egenskapen currentStyle: objektet är null eller odefinierat 
flexibility2.js?_rtv=033839933, rad 1 tecken 13792

A simple test case for this is:

.christoffer-flex {
    -js-display: flex;
}
.christoffer-hide {
    display: none;
}

<div class="christoffer-flex">
    <div class="christoffer-hide">hello world</div>
</div>

The library doesn't work on real ie 8, 9. I see that all new commits edit rows in readme.md but not have fix any bug

I couldn't find any way to message you directly so this was the next best thing.

An IE8/9 pollyfill for flexbox has been so sorely needed in the front end development industry but I thought I'd have to wait until the browsers were completely dead before I'd get to use flexbox without having to worry about legacy browser support.

With this pollyfill, it feels like Christmas has come early :D

This pollyfill frees us up to use flexbox as much as we like without those rusty old IE chains holding us back.

I've notified the entire team of Front Enders at our company about this and we're all super excited about the possibilities that this pollyfill gives us.

Thanks sooooo much for putting the effort into building this awesome pollyfill! :D

I’ve created a quick demo: https://jsbin.com/giwavu/edit?css,output. (Note: replace /edit... in the URL with /quiet when testing in IE.)

Result in IE11:

After switching to Document mode: 9 (Emulation panel in F12 tools):

Document mode: 8

Just wondering if this is designed (or roadmapped) to fix the wrapping bug in Android browser 4 -> 4.3, and UC Browser 9.9 for Android?

I have attempted to use flexibility to polyfill those browsers, but to no success.

Many thanks

http://caniuse.com/#feat=flexbox
"Only supports the old flexbox specification and does not support wrapping."

Hey guys,

First, thank you for making this plugin. Seriously, not having to setup a fallback is music to my ears—that is, if I can get it to work.

To the best of my knowledge, there's no reason this shouldn't be working, but it doesn't seem to be honoring any changes I make to flexbox declarations.

This is suppose to be a grid system. In Chrome, it looks like this:

But in IE9, it looks like this:

The relevant code is as follows:

Markup

<div class="grid">
    <div class="grid-box">
        <a class="grid-box-content" href="#">
            <span class="icon-tool-box"></span>
            <h3 class="grid-box-title">Title</h3>
            <p>Body Content</p>
        </a>
    </div><!-- end .grid-box -->
    <div class="grid-box">
        <a class="grid-box-content" href="#">
            <span class="icon-tool-box"></span>
            <h3 class="grid-box-title">Title</h3>
            <p>Body Content</p>
        </a>
    </div><!-- end .grid-box -->
        <div class="grid-box">
        <a class="grid-box-content" href="#">
            <span class="icon-tool-box"></span>
            <h3 class="grid-box-title">Title</h3>
            <p>Body Content</p>
        </a>
    </div><!-- end .grid-box -->    
</div>

CSS

.grid {
    -js-display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    overflow: visible;
    width: 100%;
}

.grid-box {
    background-color: #fff;
    border: 1px solid #eee;
    border-width: 0 1px 1px 0;
    color: #222;
    margin: 0;
    vertical-align: top;
    width: 33.333333333333%;
    -js-display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    height: auto;
}

.grid-box-content {
    -js-display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: justify;
    justify-content: flex-start;
    min-height: 0;
    overflow: hidden;
    padding: 50px;
    width: 100%;
}

I'm hoping I'm just doing something wrong. Any help would be greatly appreciated, thank you!

Testing in IE9 - Window 7, if any SVG is present, the following error is thrown:

SCRIPT5007: Unable to get value of the property '-js-display`: object is null or undefined

Any markup following the svg fails to get any of the flexibility fixes applied.

E.g.

I created a test to recreate this: https://github.com/timkelty/flexibility/blob/master/tests/test-svg.html

It’s less common but possible to use text nodes as children of a flex container.

<div class="flex-container">
    <div class="flex-child-1">This text is in an element.</div>
    This text is not in an element but will act like it is when flexbox is applied.
</div>

This is not supported by flexibility right now, but the raw text node could be wrapped to achieve similar functionality.

Hello everyone,
I wanted to center vertically 2 elements in a div. In IE 8 it is working great but in IE 9 and 10 not.
CSS I used:

.container { -js-display: flex; display: flex; align-items: center; }

IE 8 preview:

IE 9 and 10 preview:

Is there a way to fix that?

It’s quite common to find white space in the source of a flex container.

<div class="flex-container">
    <div class="flex-child-1" style="width:50%"></div>
    <div class="flex-child-2" style="width:50%"></div>
</div>

Do you see it? The white space text nodes are the newlines and tabs found around the children.

If we do not remove these nodes, then the browser will render them as a space, and in our above example, the children would stack as a result.

To remove them, one might think it’s as easy as looping over the children of the flex container.

each(container.childNodes, function (child) {
    // if the child is a text node that is only white space
    if (child.nodeType === 3 && /^\s+$/.test(child.nodeValue)) {
        // backup and erase the white space
        child.backupNodeValue = child.nodeValue;
        child.nodeValue = '';
    }
});

Unfortunately, Internet Explorer 8 does not recognize white space text nodes. Instead, they exist only as part of the outerHTML string.

console.log(child.outerHTML) // '\n\t<div class="flex-child-1" style="width:50%"></div>'

So, how do we remove them?

One option is to rewrite child elements by:

1. Moving all child nodes of the flex container to a fragment.
2. Trimming the outerHTML of child elements with trailing white space.
3. Moving all child nodes of the fragment back into the flex container.

This option has the downside of destroying any data or events attached to a child with white space.

Another option is to collapse the font size by:

1. Setting the font-size on the flex container to 0.
2. Restoring the font-size on each child.

This option is more straight-forward. Unfortunately, it has the downside of hiding any non-empty text children, and presents the challenge of detecting and restoring the font size on children. For example:

<div class="flex-container" style="font-size:2em">
    <div class="flex-child" style="font-size:1.5em">
        go ahead, calculate my font size
    </div>
    and what are you going to do with me, huh?
</div>

I do not know how to correctly calculate the font size of any element in pixels, and do remember that getComputedStyle does not exist in Internet Explorer 8.

Therefore, until we find another way to remove the empty text nodes without overwriting the child elements, I intend to conditionally trim the outerHTML of children, as demonstrated in the first solution.

Hi, i'm trying to make this work on my IE8/9 but it's not work at all. It's not working in my project and even in test page https://10up.github.io/flexibility/. Throught browserstack is same result, whats wrong?

Just made a pen to see how the script works, but unfortunately it neither works correctly in IE8 nor IE9:
http://s.codepen.io/edge0703/debug/pgbBaQ

In IE8 the elements are distributed across the page, but there's no spacing between the elements, as it would normally be with justify-content: space-between. In IE9 flexbox is ignored at all and everything is displayed as if flexbox wouldn't be present.

Using flexibility.js in combination with Autoprefixer (built into bdkjones/CodeKit) causes the -js-display: flex; property to be expanded to read:

-js-display: -webkit-box;
-js-display: -webkit-flex;
-js-display: -moz-box;
-js-display: -ms-flexbox;
-js-display: flex;

Any thoughts on how to make this 'neater'?

Hi!

I faced with the following issue. I'm getting JS error in console when the page contains inline SVG elements.

Link to test: https://jsfiddle.net/xL8fseze/5/embedded/result/

Environment: IE11 in "Document mode 9"

I was thinking of using this for iOS since I've got a bug that I can't workaround, is that possible?

I have replicated the issue with this case #23

The bug is when there is a negative value in the selected property it throws. I have a class in my css grid as below. The margin with a negative value causes the error. If I make it a positive value the error goes away. Ill try to get a demo up as well. If I get the chance and find a fix Ill see if I can get a pull request in.

.flex-row  {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -js-display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-left: -8px;     // <- causes error
    margin-right: -8px;   // <- causes error
}

When requiring the flexibility package require('flexibility') I get a function that I am not sure how to use:
function(e) { t.fillNodes(e), t.computeLayout(e) }

The only way I seem to be able to get this to work is by loading in flexibility as a script tag.
When I use a script tag the flexibility object is attached to the window and I can use the window.flexibility.walk(domElement) to apply the flexibilty polyfill to the correct nodes that need flexbox.

How can I correctly use the npm package in order to use the walk function to flexize the dom element needed in ie9?

Also should I be even using the flexibility.walk function. In the example in the readme it seems like it works without it though this was not the case for me.

Is there a known issue with rendering a flexbox layout when the browser is resized in IE9?

Pardon me if this has been asked before. And maybe I'm doing it wrong. I tried the test files, namely tests/test-widths.html in IE9. The flexbox doesn't adjust when the browser window is resized. Has anyone else experienced this issue?

First thanks for the library, it seems like it has great potential and works for a lot of people.

Unfortunately I can't seem to get even a basic example working. Here's my codepen:

http://codepen.io/coyledesign/pen/JXKgry

In IE8 and 9 it looks like:

Hope you can point me in the right direction where I'm going wrong. (For the script I've just pasted in the minified version in a script tag)

Pointing phantomjs at the flexibility homepage results in this:

Doesn't work correctly when you limit height for wrapper, and set overflow: auto for one from the children.
Example: https://jsfiddle.net/jrwyqgjq/4/

Hello internet,

I have some time to love on Flexibility the next few weeks, so I’d like to lay out my general plan.

Project goals in v2.0

1. Write out all of the flexbox calculations as JavaScript and specify the order they must be run. This will serve as the technical roadmap for v2, including the new features.
2. Write out the way flex data is determined in IE.
3. Separate out the flexbox calculations as separate scripts. This way, it might be easier for other developers to patch missing or malfunctioning features.
4. Separate out the way elements are flexed, allowing other browsers to use js flexed elements. This would allow support for older Android, and also allow me to test flex in browsers like Chrome, which might be nice for development.

Notable features in v2.0

• A new JS flex engine written from scratch.
• Support for flex-grow, flex-shrink, and flex-basis, and margin (yay margin: auto).
• No erroring out because of SVGs or un-displayed elements.

Future features in v2.x+

• Support for fixed, absolute elements within flex.
• Separated flex adaptors so that you could use flexibility with, say, data attributes on Android.

P.S. Please forgive the delays. I manage svg4everybody, sanitize.css, normalize.css, and I created and maintain the largest number of PostCSS plugins.

Hi there,
I would like to use the Flexibility polyfill in my Angular JS app. When the website loads for the very first time, everything seems OK (when it comes to flex layout on IE9). However when I change the Angular state and load new partial view (without a postback), "Flexibility fix" doesn't seem to be applied anymore. I suppose I need to re-initialize (call one of the API functions) any time the DOM changes?

Hey,

Introducing display:none; on an element within a flex container in IE 8/9 seems to break the layout, I've modified a codepen given by @edge0703 earlier (see demo below).

However I apoligize if I'm being mislead by browserstack, which is what I'm using as emulation since Edge and IE 11 give completely opposing results.

Demo here:
http://devoncmather.com/flex-test.html

Screen shots here:
https://dev.windows.com/en-us/microsoft-edge/tools/screenshots/#http://devoncmather.com/flex-test.html

Thanks in advance,
Devon Mather

The "already been reported" and "fork this project" links in the contribution guidelines point to https://github.com/10up/flexibility/blob/master/issues and https://github.com/10up/flexibility/blob/master/fork (respectively), which resolve as 404s.

These URLs should be updated to https://github.com/10up/flexibility/issues and https://github.com/10up/flexibility/for, respectively.

Hi

I'm having problem using flexbox on IE9. Here the scenario:

• I'm using postcss flexibility in order to get the -js- prefix.
• I'm using bower to get the latest version of flexibility.js which I place just before the end of my </body> tag. The version I'm using is 1.0.6.

Here my HTML:

<div id="flexer" class="flexer">
    <div>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur.</div>
    <div>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur.</div>
</div>

As you can see there is one parent and 2 childs.

Here my scss:

.flexer {
    display: flex;

    div {
        flex: 1;
    }
}

The output of my scss gives me a -js- prefix but on display: flex only, not on flex: 1.

They divs are one next to each other but they seem to go out of my browser edges, the container doesn't wrap them.

Any idea why?

Also, I tried to use your walk() function but it looks like isn't working at all. The error I'm getting is the following:

Unable to get value of the property '-js-display': object is null or undefined

Thanks

I'm getting JS error when trying to use it in IE8 and IE9:

line: 1
char: 13551

Hi,

I have implemented a simple layout using bootstrap 4 flexible grid system. I have used the postCSS to add the -js-display: flex; before each display: flex;, I have the script included in my pages. When I simulate the IE 8&9 or even go to a virtual machine with IE 8&9, it doesn't work. The columns that were previously aligned in a row are now stacked under each other.

There is a simple pen showing the layout and styles.
http://codepen.io/anon/pen/JXpNpZ

What am I doing wrong that it doesn't work for me at all? Thank you for your help!

Hi,

i think there is a miscalculation of the :last-child elements width.
The SCSS:

.container{
            -js-display: flex;
            display: -webkit-box;
            display: -webkit-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;

            .item{
                width: 20%;
                margin-right: 9px;
                -webkit-flex-shrink: 1;
                -ms-flex-negative: 1;
                flex-shrink: 1;
                -webkit-flex-basis: auto;
                -ms-flex-preferred-size: auto;
                flex-basis: auto;
                -webkit-box-flex: 1;
                -webkit-flex-grow: 1;
                -moz-box-flex: 1;
                -ms-flex-positive: 1;
                flex-grow: 1;

                &:last-child {
                    margin-right: 0;
                }
            }
}

The HTML (simplified):

<div class="container">
    <input class="item">
    <input class="item">
    <input class="item">
    <input class="item">
</div>

It seems that the last element is calculated with its margin still active.

Chrome 48.0:

IE9 & IE10 (IE8 untested)

It's not a major problem for my current projects as older IEs are not fully supported but maybe it helps.

Greetings,
Robert

On this site, I've up this script for IE9 and lower. It works pretty well, but I'm having an issue where each textbox's wrapper isn't stretching to fill it's container. See screenshots:

Is flex: 1 1 auto; not supported yet? Would love to see a list of supported features.

Returns "unable to get property 'stretch' of undefined or null reference" when running in IE9 mode in IE11.

In code this is highlighted, "flexibility.transform.align[i][n]".

I use this plugin and get this error Uncaught TypeError: document.attachEvent is not a function in chrome and edge browser. Does any plugin missing here?

does flexibility support android old versions
such as android 4.1,4.2

Hey guys,
I'm getting an error on IE9:

SCRIPT5007: Unable to get value of the property '-js-display': object is null or undefined

Any clues?

I'm using version 1.0.5 (with react/redux, babel+webpack)

Same issue as here, but I'm using React. This will be a common issue for most Js rendered apps.

So requiring in the file automatically runs a function that goes through all the DOM elements and adds the various fallback styles, and giving you access to window.flexibility.

We need to be able to recalculate or re-run the self invoking function when we re-render areas of the site. .walk and .init doesn't really work as we won't always know the elements to render due to app's dynamic nature, and we should really be able to just define with -js-display: flex.

Ideally we would also be able to assign flexibility as a variable and use it when we need to, not whenever we require it and have it as a global variable.

E.g.

import flexibility from 'flexibility';

// Initial page render
render(foo, function() {
   flexibility.init(); // Not attached to window, and this is the first initialisation!
});

// On React component / Angular controller update
render(bar, function() {
   flexibility.update(); // Recalculate whole DOM
});