Flexbox with multicolumn columns property, bug in Firefox?

Question

Is this a bug in Firefox?

It looks well in Chrome or if I remove columns: 2 then it also works in 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

It's clear that both Firefox and Chrome render the layout differently with the columns property in the mix. In Firefox, columns has an impact. In Chrome, it does not.

It appears that Chrome has the correct implementation.

The columns property should have no impact on a flex container.

From the flexbox spec:

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.

I say it "appears" that Chrome is correct because, technically, the spec is saying that columns should have no effect "on a flex container". But the code in the question applies columns to a flex item. So I guess an argument can be made that the rule doesn't apply.