Microsoft Edge 浏览器破坏了嵌套的 flex 子项答案

【问题标题】：Microsoft Edge browser breaks nested flex childrenMicrosoft Edge 浏览器破坏了嵌套的 flex 子项
【发布时间】：2019-02-06 23:42:48
【问题描述】：

我正在使用 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) 上完全中断。在 Edge 上，我用于卡片的 <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 样式并不是一个可行的解决方案。我不能手动更改子 flex 属性以防止它在 Edge 上中断。此外，它会改变孩子们的行为方式。例如，如果我在 <section> 上设置宽度，我希望它的子元素填充空间。

这是一个已知的带有 flex 子节点的 Edge 错误吗？内部<div> 不应该根据其内容的需要增长吗？

同样重要的是，有谁知道我可以在样式表中放入样式表以防止 Edge 折叠层次结构中的 flex 项的通用解决方法，而无需我在 HTML 中添加任意标记或样式自己？

【问题讨论】：

我不知道你的问题的答案，但是你能给一个网页，我们可以看到效果吗？
我添加了一个 JSFiddle，让您可以亲自查看问题。
你为什么要在你内心的div 上应用display: flex？另外，您是否打算在您的section 中有多个内部div？标记，以及外部div 中的更多section 元素？如果你附上一张你希望它如何出现的图片，可能会更容易。
HTML 是一种简化。是的，<section> 就像一张卡片，可以包含标题、缩略图、文本等。现在在现实生活中它包含<section><a><img class="thumbnail" …/></a></section>。但无论如何，真正的“为什么”是“为什么它可以在 Chrome 和 Firefox 上运行，却在 Edge 上崩溃”？

标签： css flexbox microsoft-edge

【解决方案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 在渲染这些值时存在问题。

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

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

【讨论】：

【解决方案2】：

EDGE 必须使用 flex-flow，而不是 flex-wrap。

【讨论】：