206 Chapter 16
fit-content
The next intrinsic keyword value is potentially the most useful. Called
fit-content, it sizes an element just as floated elements or table cells do:
An element will expand to be just wide enough to contain its content,
unless the maximum width of the element is reached, in which case, the
content will wrap.
Figure 16-3 compares the effect of fit-content to max-content and
min-content. The box at the top left has fit-content applied, and the con-
tent wraps when it reaches the limit of the parent container. In contrast,
the box at the top right has max-content applied, so it should expand to fit
its content—however, the box now exceeds the width of its parent container,
which has an overflow value of hidden, meaning the box is clipped.
The box at bottom left also has fit-content applied, so the container
resizes to fit the width of the content; the box at the bottom right has
min-content applied, so the container is only as wide as the img element
and the text content wraps.Figure 16-3: The fit-content value, compared to max-content and min-contentfill
The final keyword in the spec is named fill. (But in Firefox it’s available
and in Chrome it’s fill-available!) This extrinsic value makes an element
fill all available space along the height or width of its parent.
Say you want to make an inline-block p element, with border and pad-
ding, expand to be as wide as its parent. Generally, you would apply these
rules:p {
border-width: 0 0.5em;
display: inline-block;
padding: 0 1em;
width: 100%;
}