How to set the width of a <div> to fit its content

Use the display CSS property to set the width of a <div> element to fit its content.

By default, an HTML <div> element has a width of 100%, forcing it to take on the maximum allowable width within its parent container.

However, sometimes you may find the need to have a <div> that is set to be no wider than its content.

Making a <div> fit no more than the width of its content

In this example, you have a <div> with a class named make-me-fit containing the sentence Hello, world!, and you’d like the width of the <div> to fit that sentence:

<html>
	<body>
		<div class="container">
			<div class="make-me-fit">
				<p>Hello, world!</p>
			</div>
		</div>
	</body>
</html>

There are a couple of ways to do this using the display CSS property. One involves the parent container, while the other involves the <div> element for which you’d like to change the width.

Method 1: Using CSS Flexbox to make a <div> fit its content

The first method is to set the display property of the parent container to flex:

.container {
	display: flex;
}

Method 2: Using inline-block to make a <div> fit its content

The second method is to set the display property of make-me-fit to inline-block:

.make-me-fit {
	display: inline-block;
}

Either of the above methods will ensure that the <div> element make-me-fit is no wider than the width of its content. Choose the method that works best on your page without disrupting its layout.

Method 3 (modern browsers only): Using fit-content to set the width of a <div> to no wider than its content

In modern browsers, you can set the width CSS property to fit-content to perform the same task:

.make-me-fit {
	width: fit-content;
}

In particular, Internet Explorer does not support this modern method. So if you need to support Internet Explorer users, use either of the first two methods instead.

That’s all there is to it! Your <div> is now set to the width of its content, and no wider.