Regressed Flex items are not sorted according to order if separated by abspos sibling

Published: | Categories: CSS

Description

On Firefox 52, the CSS order property, which allows to sort flex items by an arbitrary order, is ignored in some cases if those items are separated by an absolutely-positioned element like this:

<div style="display:flex">
  <div style="order:2">B</div>
  <div style="position:absolute"></div>
  <div style="order:1">A</div>
</div>

Mozilla developers are aware of the regression and working on the solution.

Update: This issue has been fixed with Firefox 53 and Firefox ESR 52.1.

References