Hurry! Try our new Interactive Courses for FREE. 🥳   🚀

CSS fit-content Property

CSS fit-content property acts as a fit-content (stretch). Practically, this means that the box will be using the available space but still not more than the max-content.

When it is used as a laid out box size for height, min-width, width, max-height, and min-height where the minimum and maximum size refers to the content size.

The CSS sizing specification also defines the fit-content() function.

Syntax for fit-content Property

Following is the syntax for the fit-content property.

fit-content: length | percentage

Example 1: CSS fit-content Property

Here in the example below, we are using the fit-content property with different table or cell colours, border styles, and their different values. In this case, we have given the fit-content value of the text as 'width: fit-content'.

<!DOCTYPE html>
<html>

<head>
	<title>The fit-content property in CSS</title>
	<style type="text/css">
		.container {
		  border: 2px solid #ccc;
		  padding: 10px;
		  width: 20em;
		}
		
		.item {
		  width: -moz-fit-content;
		  width: fit-content;
		  background-color: #8ca0ff;
		  padding: 5px;
		  margin-bottom: 1em;
		}
	</style>
</head>

<body>
	<div class="container">
		<div class="item">Item</div>
		<div class="item">Item with more text in it.</div>
		<div class="item">Item with more text in it, hopefully we have added enough text so the text will start to wrap.</div>
	</div>
</body>

</html>

Output:

Example 2: CSS fit-content Property

In the example below, we are using the fit-content property with different table or cell colours, border styles and their different values. In this case, we have given the fit-content value of the container as 'width: fit-content'.

<!DOCTYPE html>
<html>
<head>
	<title>The fit-content property in CSS</title>
	<style type="text/css">
		div {
		  color: deeppink;
		}
		
		.border-box {
			border: 4px double purple;
		  width: fit-content;
		  background-color: #8cccff;
		  padding: 5px;
		  margin-bottom: 1em;
		}
	</style>
</head>
<body>
	<div class="border-box">Study Tonight</div>
</body>
</html>

Output:

Live Example

Here in this live example, you can easily test the live coding and execute the example using different values or edit the coding and create your own example.

Browser Compatibility

There are many browsers that do not support all the latest CSS properties. Hence, while developing any webpage, if you are using any CSS property you must check the browser compatibility for that CSS property and then use it. It is of immense importance today when there is a large variety of web browsers available.

Name of Browser Background size contain and cover
Chrome 46 46
Edge 79 79
Firefox 3 3
Internet Explorer no no
Opera 33 33
Safari 11 11
Webview Android 46 46
Chrome Android 46 46
Firefox Android 4 4
Opera Android 33 33
IOS Safari 11 11
Samsung Internet 5.0 5.0

Conclusion

The initial value for the fit-content property is none. This property is applicable to all elements and also to ::first-letter and ::first-line. This property is not an inherited one. The computed value for the fit-content property is the as specified one.