16 : Values and Sizing

Examples

  • Figure 16-1: Comparing values for box-sizing: the default content-box and border-box.
  • Figure 16-2: The max-content value makes the element as wide as its widest child, whereas min-content makes the element as wide as its narrowest child.
  • Figure 16-3: The fit-content value, compared to max-content and  min-content.
  • Figure 16-4: Using the fill value for width makes the inline-block caption shown here fill the available width of its parent.

Browser Support

Chrome Firefox Safari IE
Root-relative units Yes Yes Yes Yes
Viewport-relative units Yes Yes Yes* IE9, IE10
Calculated values Yes Yes Yes Yes
Box sizing Yes Yes Yes Yes
Intrinsic/extrinsic sizing Yes§ Yes§ Yes§ No
  • * Buggy support for vh in iOS.
  • † Supports vm instead of vmin, no support for vmax.
  • ‡ No support for vmax.
  • § Requires vendor prefix.

A note on browser versions

Where a Yes is used in these support tables it means that the feature is supported either in an evergreen browser or in at least the last three versions of Safari (6–8) or IE (9–11). Otherwise, a version number will be shown. With regards to IE, it’s safe to presume that, with a very few exceptions, almost nothing in this book is implemented in IE8 or below.

For more complete version history I highly recommend the Can I use… compatibility tables.