Microsoft Edge browser breaks nested flex children

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.