css3 flexbox horizontal align in absolute div

Question

I have an absolute positioned div with a display: box

In Chrome it works perfectly fine, the children of the div align horizontally, but in Firefox it doesn't seem to work.

If I remove the position: absolute it works fine in both browsers, but I need it.

Example: http://dabblet.com/gist/1716069

Answer 1

The experimental display types you're using mean totally different things, and none of them match display: box for the simple reason that this last doesn't exist and never will (the CSS spec will be using display: flexbox, with quite different behavior from all the prefixed "box" displays, all of which have very different behavior from each other).

Since they mean different things, browsers handle the section of CSS that says that absolutely positioned elements have their display values changed to block or table somewhat differently. Gecko changes -moz-box to block. WebKit doesn't change -webkit-box to anything else.

I suggest not using experimental display types that are going to disappear in the not too far off future. If you do have to use them, you probably want to wrap a block around your "box" and position that block.