The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)

Values and Sizing 205

All of the intrinsic and extrinsic sizing models are applied using a

keyword value on the width or height properties (and their min- and max-

variants). For example, this listing shows how a new sizing model would

be applied to width:

E { width: keyword; }

max-content and min-content

The first new keyword values, max-content and min-content, are intrinsic val-

ues that make an element as wide or as high as the largest (max-content)

or smallest (min-content) item of content (in text, the width of the longest

word) it contains. Consider this markup of an img and p element inside a

containing div:

<div>

<img src="foo.png">

<p>...</p>

</div>

Say the img element has a width of 200px and the width of the p is

300px. If the div element had a width value of max-content, it would be just

wide enough to contain the p, and if it had a value of min-content, it would

be just wide enough to fit the img and the text in the p would wrap.

Compare the results shown in Figure 16-2. The container element

on the left has the max-content value applied, which makes it as wide as the

widest child (the p), whereas the one on the right has min-content applied,

which makes it as wide as the narrowest child (the img).

Figure 16-2: The max-content value (left) makes the element as wide as its widest child,

whereas min-content (right) makes the element as wide as its narrowest child.

noTe As of this writing, the current desktop and mobile versions of Chrome, Firefox,
and Safari support these keywords, although each requires vendor prefixes (namely
-moz-min-content and -webkit-min-content). Support is not currently present in
Internet Explorer or older smartphones.