为什么在DOM中插入中间非标准元素会破坏flex框

Why does inserting intermediate non standard elements in the DOM break flex boxes?

本文关键字：flex 元素 非标准 DOM 插入 中间 为什么      更新时间：2023-09-26

我在Angular JS指令元素中看到了这一点，但这里有一个最小的复制代码：

OK代码（父div宽度为30rem）：

div {
  display: flex;
  padding-top: .5rem;
}
.parent {
  flex: 0 0 30rem;
  background-color: BlueViolet;
}
.child {
  flex: 0 0 15rem;
  background-color: DeepSkyBlue;
}
.text {
  background-color: DarkOrange;
}
<div>
  <div class="parent">
    <div class="child">
      <span class="text">Dummy text</span>
    </div>
  </div>
</div>

KO代码（父div宽度不是30rem：它与Chrome和Firefox下的文本大小相同，在IE11下是15rem）：

div {
  display: flex;
  padding-top: .5rem;
}
.parent {
  flex: 0 0 30rem;
  background-color: BlueViolet;
}
.child {
  flex: 0 0 15rem;
  background-color: DeepSkyBlue;
}
.text {
  background-color: DarkOrange;
}
<div>
  <dummy-tag>
    <div class="parent">
      <div class="child">
        <span class="text">Dummy text</span>
      </div>
    </div>
  </dummy-tag>
</div>

这是一个新的flex bug吗？

flex就是这样工作的。它不是关于非标准元素（默认情况下被视为display:inline元素），而是关于任何没有正确的display值的元素。

在那里放一个<div>而不是<dummy-tag>，你会得到类似的效果。

相关文章：