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?

Solution 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.

Solution 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.

Solution 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.

Comments

[Mark Salvatore]

Your solution worked for me in both IE10 & IE11! Thanks for posting this even though you thought it too late. It certainly helped me! Thank you!

[pierot]

This was a solution for me.

[HeberLZ]

Thanks! i was having this same issue due to the flex-basis either auto or 0% not working as expected on elements with max-width on ie11. The link was very helpful :)

[torvin]

Your solution makes the element occupy the whole amount specified in max-width, so it is not any different from replacing max-width with width

[Ian Clark]

align-[self/items] applies to vertical positioning, not horizontal - so this doesn't answer the OPs question about margins and max-width

[Benjamin Dobell]

@IanClark I'm aware that align-self shouldn't resolve the OP's question, however, a least in my (very similar) case it did. Hence my statement, "Presumably this is just a buggy implementation of flexbox in IE11."

[Sandwich]

@torvin The difference is that this method allows the element to shrink down according to the constraints of its container. Explicitly setting just width would force the element to be that width even if its container were narrower.

[Damien Roche]

For the love of all that is holy please stop making browsers Microsoft.

[klewis]

Thanks @BenjaminDobell Your solution helped me solve my issue. I'm now sticking this crazy hack into an IE only media query so only IE reads it.

[klewis]

@tmo256 you should definitely post an example to demonstrate the before and after effect. For as simple as you stated it, it does not work in my case.