具有多列 属性 的 Flexbox，Firefox 中的错误？

Question

这是 Firefox 中的错误吗？

它在 Chrome 中看起来很好，或者如果我删除 columns: 2 那么它在 Firefox 中也可以工作。

div {
  width: 500px;
  padding: 2rem;
  display: inline-flex;
  align-items: baseline;
  border: 1px solid red;
}

h1, p {
  margin: 0;
  padding: 0
}

p {
  margin-left: 2rem;
  columns: 2;
}

<div>
  <h1>Lorem ipsum dolor sit amet.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad qui repudiandae ipsum delectus fugiat esse voluptates numquam nesciunt, officiis, repellendus consequuntur optio. Tempora magni aliquam, nulla fuga quam deserunt veritatis.</p>
</div>

codepen

Answer 1

很明显，Firefox 和 Chrome 呈现的布局与 columns 属性 的混合不同。在 Firefox 中，columns 有影响。在 Chrome 中没有。

看来 Chrome 的实现是正确的。

columns 属性 应该不会对弹性容器产生影响。

来自 flexbox 规范：

3. Flex Containers: the flex and inline-flex display values

Flex containers are not block containers, and so some properties that were designed with the assumption of block layout don’t apply in the context of flex layout. In particular:

• the column-* properties in the Multi-column Layout module have no effect on a flex container.
• float and clear don't create floating or clearance of flex item and don't take it out-of-flow.
• vertical-align has no effect on a flex item.

我说 "appears" Chrome 是正确的，因为从技术上讲，规范说 columns 应该没有效果 "on a flex container"。但是问题中的代码将 columns 应用于弹性项目。所以我想可以提出该规则不适用的论点。