omega omega - 2 months ago 27
CSS Question

Flex flow not working in IE11

In IE11 (Edge mode), I have this code

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.A {
display:flex;
flex-flow:row wrap;
}
.B {
flex:1;
background-color:tomato;
}
.fix {
width:600px;
background-color:lime;
}
</style>
</head>
<body>
<div class="A">
<div class="B">
foofoofoofoofoofoofoofoofoo
</div>
<div class="C">
<div class="fix">bar</div>
</div>
</div>
</body>
</html>


In chrome, it will actually wrap when screen width is small enough, but in IE11 Edge mode, it does not wrap and just overlays on each other. I found this page https://msdn.microsoft.com/en-us/library/jj127300(v=vs.85).aspx saying that flex-flow should be defined and w3schools says its defined for IE11.

http://www.w3schools.com/cssref/css3_pr_flex-flow.asp

Does anyone know what's wrong?

Thanks

This is what it looks like in IE11 (edge mode):
enter image description here

And in chrome:
enter image description here

Answer

Your .B element has flex: 1 applied.

This computes to:

  • flex-grow: 1
  • flex-shrink: 1
  • flex-basis: 0% (in Chrome, FF, Edge)
  • flex-basis: 0px (in IE11)

IE11 takes this to mean the flex item can shrink to 0, hence the overlap.

Instead of flex: 1 use flex: auto, which computes to

  • flex-grow: 1
  • flex-shrink: 1
  • flex-basis: auto (content length)

https://jsfiddle.net/s26rdfbw/3/

More details about flex: auto in the spec.

Comments