CODEWITHSUNDEEP
htmlcssinternet-explorerflexbox
ZZB
ZZB

Reputation: 810

IE 11 issue with flexbox item with max-width

In IE 11 when an item items don't properly center if they have maximum width property. This example however works in Chrome and Firefox.

JS Bin

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: blue;
  width: 100%;
}

.red {
  background-color: red;
  flex-grow: 1;
  display: flex;
  max-width: 200px;
}
<div class="container">
  <div class="red">non centered box</div>
</div>

Upvotes: 13

Views: 8009

Answers (3)

justalittleheat
justalittleheat

Reputation: 403

I have had this issue as well. In my case I wanted flex-grow but still wanted to limit the max-width. What I do is wrap any css I don't want IE11 to see in @support. IE11 does not support this rule and ignores its contents completely. I will just check for something that has been around forever like text-align so all the other modern browsers can apply the css rule. You can do this for anything, I just discovered this while trying to figure out an answer to this issue.

@supports(text-align:center) {
    div {
        max-width: 350px;
    }
}

Upvotes: 0

Eric Liu
Eric Liu

Reputation: 303

Explicitly set width: calc(100%); so IE knows the box width and center it properly.

Upvotes: 4

Stickers
Stickers

Reputation: 78676

It is a bug. But according to IE Feedback it was supposed to be fixed already.

As a workaround, you can remove flex-grow: 1; if you don't have to use it.

Upvotes: 8

Related Questions