1

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

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • check codepen demo in firefox and chrome, thanks. –  Apr 15 '17 at 21:06
  • I think it is Firefox that is ok, and Chrome is wrong....you used `align-items: baseline;`, which is suppose to position the items along the _bottom_ – Asons Apr 15 '17 at 21:12
  • i think that firefox is wrong, remove columns: 2 and then there is no difference between firefox and chrome. Also check this [article](http://kizu.ru/en/blog/flex-baseline/) to see what baseline elements should look. –  Apr 15 '17 at 21:18
  • Well, that article is about `inline-flex` and you use `flex`, which is more like a block element, so based on that, I can't say which one is right, though I think Chrome since `baseline` is suppose to affect inline elements, not block – Asons Apr 15 '17 at 21:21
  • Changing to inline-flex doesn't help, there is no difference in firefox. –  Apr 15 '17 at 21:46

1 Answers1

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.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • 1
    men have you read all the specs already? `:P` I just find that section about `flex` and `columns` ;) – dippas Apr 15 '17 at 21:31
  • 1
    ahahah it seems `:)` just keep the good work, I've learned good things from you regarding `flexbox`, specially in specs ;) – dippas Apr 15 '17 at 21:35
  • So it's seems like a firefox bug? I've checked this demo in Nigthly and it looks the same as in Firefox 52. –  Apr 15 '17 at 21:48
  • The specs (both Flex and Multicolumn) don't say a lot about combining their properties. So the browser makers seem to have wider discretion in the implementation. I'm not sure there is any right or wrong here, but based on the language in the flexbox spec, I would say it's a FF bug. – Michael Benjamin Apr 15 '17 at 21:54
  • 1
    In Edge the result is the same as in Firefox but I agree with you that Chrome renders it correctly. Thanks for help. –  Apr 15 '17 at 22:05