HTML and CSS Reference
In-Depth Information
Here, the combined widths would cause the containers to overflow their par-
ent, which would look horrible. Fortunately, a default negative flex value of 1 is set
on all of the children, which causes them all to shrink by an equal amount of the
overflow, meaning that all is well. If you wanted one of the children to be reduced
by a larger amount than the others, you could set an explicit negative flex value
on it, for example:
#plot {
flex: 1 3 500px;
}
Now the flexible boxes are shrunk in size until they no longer overflow their
container. Because the negative flex ratio
#cast
to
#facts
is 1 : 3,
#cast
will have
¼ of the total width reduction applied to it, and
#facts
will have ¾ of the total
width reduction applied to it.
This would cause the Plot to be shrunk by ths of the overflow amount, and
the other two to be shrunk by only th—the shrinking ratio is 1 : 1 : 3.
CROSS-BROWSER FLEXBOX WITH MODERNIZR
As you've seen, Flexbox is very useful for solving some specific types of layout
problems. The main problem with it right now is the lack of browser support. The
new syntax you've seen so far in this section is only supported in Chrome Canary
at the time of this writing.
To m a ke i it w To r k ac ro s s a w i d e r ra n g e To f b ro ws e rs at it h e m To m e n it , y To u' l l n e e d
to feed other browsers the now deprecated 2009 Flexbox syntax that was imple-
mented by Firefox, WebKit browsers, and IE.
NOTE:
The site
http://wiki.csswg.org/spec/flexbox-2009-2011-spec-property-
mapping
provides a fairly useful table showing the mapping between the
old and new syntaxes, although this is now somewhat out of date. Peter
Gasston, tech reviewer for this topic, has written a useful guide to the old
