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

Posted 2023-03-28

【中文标题】Microsoft Edge 浏览器破坏了嵌套的 flex 子项

【英文标题】：Microsoft Edge browser breaks nested flex children

【发布时间】：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 上崩溃”？

【参考方案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 属性的组成部分。

【参考方案2】：

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