Microsoft Edge browser breaks nested flex children

Question

I'm using flexbox to create a simple and elegant flexbox-based, responsive layout. Here's the example HTML:

<div class="box">
  <section class="box concise">
    <div class="box">
      this is just for test
    </div>
  </section>
  <!-- I can add more sections here,
      to serve as "cards", for example -->
</div>

Here are the styles:

.box {
  display: flex;
  flex-wrap: wrap;
}

.box>* {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
}

.box>.concise {
  flex-basis: auto;
  flex-grow: 0;
}

The purpose of the flex-basis: 0; flex-grow: 1; max-width: 100%; is my style sheet default on all flex children, so that each flex child will grow only as much needed for the content, but still fill the width, wrapping if needed. It works nicely.

The optional flex-basis: auto; flex-grow: 0; is to make the flex child only grow as needed like before, but not grow larger than that, essentially shrink-wrapping the flex item around around the content.

I'll use <section> to differentiate the "card" that doesn't grow unless needed.

section {
  background-color: white;
  border: 1px solid black;
}

That looks beautiful on Firefox and Chrome. But it completely breaks on Microsoft Edge 42.17134.1.0 (EdgeHTML 17.17134). On Edge the <section> I'm using for a card completely shrinks down, as if I were floating it out of the normal flow. The content is still shown, completely outside the bounds of the <section>. You can try it here:

https://jsfiddle.net/garretwilson/wgo8rqxf/4/

I can work around this problem on Edge by changing the flex properties of the inner <div> (by using the concise style class above):

<div class="box">
  <section class="box concise">
    <div class="box concise">
      this is just for test
    </div>
  </section>
</div>

But manually adding this concise style is not a workable solution. I can't manually change the child flex properties just to keep it from breaking on Edge. Moreover it would change how the children behave. If for example I set a width on the <section>, I would want its children to fill the space.

Is this a known Edge bug with flex children? Shouldn't the inner <div> grow as needed for its content?

And just as importantly, does anyone know a general workaround that I can put in the style sheet to keep Edge from collapsing flex items in the hierarchy, without my adding arbitrary markup or styles in the HTML itself?

Answer 1

The solution to this problem is actually quite simple. The explanation, however, not so much.

---

Solution

Don't use unitless values on flex-basis. It breaks flex layouts in Microsoft browsers (IE and Edge).

Instead of this, which you have in your code:

.box > * {
  flex-basis: 0;
}

Use this:

.box > * {
  flex-basis: 0%;
}

That solves the problem.

.box {
  display: flex;
  flex-wrap: wrap;
}

.box>* {
  flex-basis: 0%;  /* adjustment */
  flex-grow: 1;
  max-width: 100%;
}

.box>.concise {
  flex-basis: auto;
  flex-grow: 0;
}

section {
  background-color: white;
  border: 1px solid black;
}

<div class="box">
  <section class="box concise">
    <div class="box">
      this is just for test
    </div>
  </section>
</div>

---

Explanation

According to the flexbox specification, there should be no problem using unitless values with the flex-basis property.

However, in reality, IE and Edge have a problem rendering such values.

The problem is explored in these posts:

• Image behavior within flexbox (rows embedded in columns)
• flex property not working in IE
• Why does shorthand flex property behave differently than long hand properties in IE?
• Understanding unit-less flex-basis

Therefore, as a safe cross-browser alternative that works in IE and Edge, don't use unitless values on flex-basis. This applies to both flex-basis as a long-hand property and as a component of the flex property.