CSS fit-content Property

The fit-content property in CSS 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. This page gives the detail of the keyword.

Syntax

width: fit-content
block-size: fit-content

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

The term 'browser compatibility' indicates the ability of a particular website to appear fully functional on several browsers, available in the market. This means that the HTML coding of the website and the scripts on that website must be compatible to run on the browsers. 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.