box-flex Redirect 1

Mozilla-specific API
This property controls parts of the XUL box model and is not part of the flexible box model or other standard APIs.

Warning: This is a property for controlling parts of the XUL box model.  It does not match either the old CSS Flexible Box Layout Module drafts for 'box-flex' (which were based on this property) or the behavior of '-webkit-box-flex' (which is based on those drafts).

See Flexbox for more information on what you should be using instead of this property.


The CSS -moz-box-flex and -webkit-box-flex properties specify how a -moz-box or -webkit-box grows to fill the box that contains it, in the direction of the containing box's layout. See Flexbox for more about the properties of flexbox elements.


-moz-box-flex: number      /* Mozilla */
-webkit-box-flex: number   /* WebKit */


The box does not grow.
> 0
The box grows to fill a proportion of the available space.


<!DOCTYPE html>
      div.example {
        display: -moz-box;
        display: -webkit-box;
        border: 1px solid black;
        width: 100%;                
      div.example > p:nth-child(1) {
        -moz-box-flex: 1;       /* Mozilla */
        -webkit-box-flex: 1;    /* WebKit */
        border: 1px solid black;      }
      div.example > p:nth-child(2) {
        -moz-box-flex: 0;       /* Mozilla */
        -webkit-box-flex: 0;    /* WebKit */
        border: 1px solid black;
    <div class="example">
      <p>I will expand to fill extra space</p>
      <p>I will not expand</p>


The containing box allocates the available extra space in proportion to the flex value of each of the content elements.

Content elements that have zero flex do not grow.

If only one content element has nonzero flex, then it grows to fill the available space.

Content elements that have the same flex grow by the same absolute amounts.

If the flex value is set using the element's flex attribute, then the style is ignored.

To make XUL elements in a containing box the same size, set the containing box's equalsize attribute to the value always. This attribute does not have a corresponding CSS property.

A trick to make all content elements in a containing box the same size, is to give them all a fixed size (e.g. height: 0), and the same box-flex value greater than zero (e.g. -moz-box-flex: 1).


This property is a nonstandard extension.  There was an old draft of the CSS3 Flexbox specification that defined a box-flex property, but that draft is over two years old and has since been superseded.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support Not supported (Yes) Not supported Not supported Not supported
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support Not supported Not supported ? Not supported Not supported Not supported

See also

-moz-box-orient, -moz-box-pack, -moz-box-direction, flex


Document Tags and Contributors

Contributors to this page: Sheppy
Last updated by: Sheppy,