IE11 flexbox max-width and margin:auto;

Question

I have a simple flexbox container with two items:

<div id='container'>
    <div id='first-item'>first item</div>
    <div id='second-item'>second item</div>
</div>

The first item has flex-grow: 1 and max-width to 200px. The second item has margin-left: auto; to be aligned right to the container:

  #container {
    display: flex;
  }

  #first-item {
    max-width: 200px;
    flex: 1;
  }

  #second-item {
    margin-left: auto;
  }

Here is a working demo: http://jsfiddle.net/c81oxdg9/2/

I want the first item to be aligned left and have some max-width. And the second item to be aligned right.

Works fine in Chrome, Firefox and even IE10, but not IE11. In IE11, the second item gets pushed out of the container.

How to fix this for IE11? Am I missing some property?

Answer 1

I found an answer that seems to work (though I admit I haven't tested it in IE 10): I added width: 100% to the element needing alignment. Works great in IE.

Probably too late to help you, but maybe someone else will need the solution.

Answer 2

I had the same problem with

display: flex;
-ms-flex: 1;
max-width: 300px;

in combination with

margin: 0 auto;

on the child elements. They get pushed out of the container div.

However, I solved it with try and error and reading

https://github.com/philipwalton/flexbugs#11-min-and-max-size-declarations-are-ignored-when-wrapping-flex-items

and

Flexbox IE10 width issues

Finally I solved it with replacing

-ms-flex: 1; 

with

-ms-flex: 1 0 auto;

Watch out. This only works, if you really need a max-width inside the flex columns. otherwise it will look like display:block.

Answer 3

In my case I had something like:

HTML:

<div class='my-flexbox'>
        <div class='wrapper'>
            <div class='content'>
                <!-- ... -->
            </div>
        </div>
</div>

CSS:

.my-flexbox {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.wrapper {
    padding: 16px;
    margin: auto;
    max-width: 90%;
    min-width: 40%;
}

.content does not have a fixed width (or height) of any sort, but instead contains a combination of inline elements and block elements.

I wanted my content to appear centred horizontally and vertically, but respect the max-width and max-height of .wrapper. Specifying justify-content: center; on .my-flexbox pushed the content off the screen to the right (seems like a bug to me), and align-items: center; had no impact (to my knowledge this is the default behaviour).

Instead the solution was to add align-self: center; to .wrapper.

Why this makes any sense is beyond me. Presumably this is just a buggy implementation of flexbox in IE11.