omega omega - 1 year ago 228
CSS Question

Flex flow not working in IE11

In IE11 (Edge mode), I have this code

<!DOCTYPE html>
<title>Title of the document</title>
.A {
flex-flow:row wrap;
.B {
.fix {
<div class="A">
<div class="B">
<div class="C">
<div class="fix">bar</div>

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 saying that flex-flow should be defined and w3schools says its defined for IE11.

Does anyone know what's wrong?


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

And in chrome:
enter image description here

Answer Source

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)

More details about flex: auto in the spec.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download