Microsoft Edge浏览器会破坏嵌套的flex子项

Question

我正在使用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上看起来很漂亮。但它完全打破了Microsoft Edge 42.17134.1.0（EdgeHTML 17.17134）。在边缘，我用于卡片的<section>完全缩小了，就好像我把它从正常流动中漂浮出来一样。内容仍然显示，完全超出<section>的范围。你可以在这里试试：

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

我可以通过改变内部<div>的flex属性（通过使用上面的concise样式类）解决Edge上的这个问题：

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

但手动添加这种concise风格并不是一个可行的解决方案。我不能手动更改子弹性属性只是为了防止它在Edge上破坏。此外，它会改变孩子的行为方式。例如，如果我在<section>上设置宽度，我希望它的孩子填充空间。

这是一个已知的边缘bug与flex儿童？内部<div>不应该根据其内容的需要增长吗？

同样重要的是，有没有人知道我可以放在样式表中的一般解决方法，以防止Edge在层次结构中折叠flex项目，而不在HTML中添加任意标记或样式？

Answer 1

这个问题的解决方案实际上非常简单。然而，解释并非如此。

---

解

不要在flex-basis上使用无单位值。它打破了Microsoft浏览器（IE和Edge）中的flex布局。

而不是这个，你在代码中有：

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

用这个：

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

这解决了这个问题。

.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>

---

说明

根据flexbox specification，使用flex-basis属性的无单位值应该没有问题。

但是，实际上，IE和Edge在渲染这些值时存在问题。

这些帖子探讨了这个问题：

• 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

因此，作为在IE和Edge中运行的安全跨浏览器替代方案，请勿在flex-basis上使用无单位值。这适用于flex-basis作为长期财产和flex财产的组成部分。