In previous articles I’ve explored some of the new intrinsic and extrinsic CSS values such as object-fit, max-content and min-content . While still officially labeled “experimental”, these values have excellent browser support when provided with appropriate vendor prefixes.

Existing somewhere between max-content and min-content, fit-content can be very helpful, particularly when creating responsive designs.

Shrink-Wrapping Without Snapping

min-content is excellent for aligning groups of content with unknown width, such as a site navigation bar:

<nav>
	<a href="#">Home</a>
	<a href="#">About</a>
	<a href="#">Contact</a>
</nav>

With the following CSS:

nav { background: #555; }
nav a { 
	display: inline-block;
	padding: 1rem;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
}

By default, the navigation bar will look something like this:

Rather than taking the entire width of its parent, what if we want to collapse the bar down to its smallest possible width, without breaking any of the links onto a new line? We can achieve that with fit-content:

nav { background: #555; width: fit-content; }

Now we gain the ability to center-align the navigation bar, despite never setting an explicit width on it:

nav { margin: 0 auto; }

The result:

This can also work for images and other replaced elements:

figure {
	border: 2px solid #222;
	width: fit-content;
	background: #555;
	font-size: 0;
}
figure img {
	width: 200px;
}

The result, after setting two images inside the <figure> element:

Photograph of a large bug Photograph of a large bug

Note that the width of the images must be defined in order for fit-content to work. However, designers must be careful when using percentages; if the content widths do not add up, the leftover space will be retained:

figure { 
	border: 1px solid red;
	display: table;
	width: fit-content;
	background: #555;
	font-size: 0;
}
figure img {
	width: 33%;
}

The result:

Photograph of a large bug Photograph of a large bug

Obviously, the container also assumes a width of 100% of its parent in this case.

Prefixes & Fallbacks

fit-content currently requires vendor prefixes to gain full support. Like a few other exceptions in CSS, the prefix goes in front of the value, not the property:

width: -moz-fit-content; width: -webkit-fit-content; width: fit-content

fit-content is not yet supported in Internet Explorer or Opera Mini, but excellent fallbacks use the display property: specifically, display: inline-block or display: table, both of which exhibit very similar behavior to width: fit-content.

The one downside of using display: inline-block is that it will force you to confront the value’s known problems with whitespace, but both it and displaying the element with table CSS work well. For complete coverage, you’ll want to use both:

element {
	width: fit-content;
	display: table;
}

Photographs by Denis Collette under a Attribution-NonCommercial-NoDerivatives 4.0 International Creative Commons license.