CODEWITHSUNDEEP
htmlcssinternet-explorer-11flexbox
svecon
svecon

Reputation: 551

IE11 flexbox max-width and margin:auto;

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?

Upvotes: 26

Views: 35713

Answers (3)

Benjamin Dobell
Benjamin Dobell

Reputation: 4072

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.

Upvotes: 4

Fl0R1D3R
Fl0R1D3R

Reputation: 892

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.

Upvotes: 8

tmo256
tmo256

Reputation: 936

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.

Upvotes: 72

Related Questions