Question

Here is the jsFiddle:

http://jsfiddle.net/8dbQu/1/

In brief, I have such structure:

<div class='content'>
    <div class='column'></div>
    <div class='column'></div>
    <div class='column'></div>
</div>

.content is display as box

.columns have -moz-box-flex: 1;

without set .content’s position to absolute everything works fine.

But when I do so, it seems the “box” style doesn’t work any more…

How to fix it?

Answer 1

display: -moz-box triggers a XUL box (which is NOT the same thing as display: box (which simply doesn’t exist) or display: flexbox (which does something completely different)). XUL boxes cannot be absolutely positioned; if you try to position one its display value will be forced to block, just like a box with display: inline would be forced to block if positioned.

The way to ‘fix’ it is to not use XUL boxes in web code, especially not if you expect them to behave like CSS flexboxes. Support for CSS flexbox (with display: flexbox) is coming to browsers in the near future.