Microsoft Edge browser中断嵌套的flex子级

我使用flexbox来创建一个简单而优雅的基于flexbox的响应式布局。下面是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>

以下是样式:

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

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

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

flex-basis: 0; flex-grow: 1; max-width: 100%; 是所有flex子级的默认样式表,这样每个flex子级只会增长内容所需的数量,但仍然会填充宽度,如果需要,则进行包装。它工作得很好。

flex-basis: auto; flex-grow: 0; 是让flex子级只按需要像以前一样增长,但不会增长得比这更大,本质上是收缩内容周围的flex项。

<section> 区分除非需要否则不会增长的“卡”。

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

在Firefox和Chrome上看起来很漂亮。但它完全打破了微软边缘42.17134.1.0(edgehtml17.17134)。在边缘 < 我使用的一张卡完全缩小,好像我把它从正常的流动中浮动出来。内容仍然显示,完全超出了 <节> . 您可以在这里尝试:

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

我可以通过改变内部的flex属性在Edge上解决这个问题 <div> (通过使用 concise 以上样式类):

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

但是手动添加这个 简洁的 <节> ,我想让它的孩子们填满这个空间。

这是已知的flex孩子的边缘缺陷吗?难道内心不应该 <部门>

同样重要的是,有人知道 一般的